Draggabilly не добавление события к вновь добавленному элементу

Question

Я использую desandro draggabilly, и у меня возникла проблема при вставке нового элемента. Кажется, что событие не стреляет в новый элемент, который был добавлен.

Адрес jsfiddle.

Вот и код.

HTML

<div class="box draggable">1</div> 

CSS

.box { 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
    display: block; 
} 

Jquery

$(document).ready(function() { 
    $.bridget('draggabilly', Draggabilly); 
    var $draggable = $('.draggable').draggabilly({ 
     axis: 'x' 
    }); 
    $draggable.on('dragEnd', function(e, p) { 
     $(this).parent().prepend('<div class="box draggable">2</div>'); 
     $(this).prev().addClass('draggable') 
     $(this).remove(); 
    }); 
}); 

На приведенном ниже коде, когда я потащил Div 1, на dragEnd будет вставлять div 2, который имеет класс draggable, а затем удалить div 1. Проблема здесь в том, что div 2 не перетаскивается, хотя он имеет класс draggable.

Answer 1

Необходимо повторно инициализировать его после prepending, так как он добавлен в DOM динамически и event draggabilly не будет прикреплен к нему. Поэтому ниже будет решить вопрос:

$draggable.on('dragEnd', function(e, p) { 
     $(this).parent().prepend('<div class="box draggable">2</div>'); 
     $('.draggable').draggabilly({ 
      axis: 'x' 
     }); //re-initialize again 
     $(this).remove(); 
}); 

DEMO

---

UPDATE

Теперь, если вы хотите вызвать dragend событие элемента вы добавляете и держать на увеличивающиеся число на dragend просто держите глобальную переменную, скажите i и увеличивайте ее каждый раз, как показано ниже:

var i=1; //global variable 
$(document).ready(function() { 
    $.bridget('draggabilly', Draggabilly); 
    $('.draggable').draggabilly({ 
     axis: 'x' 
    }); 

    $(document).on('dragEnd','.draggable', function(e, p) { 
     i++; //increment it 
     $(this).parent().prepend('<div class="box draggable">'+i+'</div>'); 
     //display text as i 
     $('.draggable').draggabilly({ 
      axis: 'x' 
     }); 
     $(this).remove();//remove previous one 
    });  
}); 

Updated demo

Answer 2

Вы должны инициализировать каждый раз при создании вашего DIV и связать событие затем то, как показано ниже -

$(document).ready(function() { 
    $.bridget('draggabilly', Draggabilly); 
    var $draggable = $('.draggable').draggabilly({ 
     axis: 'x' 
    }); 

    $draggable.on('dragEnd', callback);  

}); 
var co=2; 
function callback(e, p) { 
     $(this).parent().prepend('<div class="box draggable">'+co++ +'</div>'); 
     $(this).prev().addClass('draggable') 
     $(this).remove(); 
     $(".draggable").draggabilly({ 
     axis: 'x' 
     }); 
     $(".draggable").on('dragEnd', callback); 
    } 

ЖИВОЙhttp://jsfiddle.net/mailmerohit5/L9kgeu3f/