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的類別，也不會拖動div 2。

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

---

立即更新

，如果你想打電話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

你有充分的時間進行初始化上創建的股利和綁定事件然後如下 東西 -

$(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); 
    } 

LIVEhttp://jsfiddle.net/mailmerohit5/L9kgeu3f/