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上它將插入具有draggable類的div 2然后刪除div 1.這里的問題是div 2即使它具有draggable的類也不可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
    });    
});

更新的演示

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/