自動創建元素註冊事件處理爲可拖動

Question

說我有一些像這樣的代碼，這就是所謂的$(document).ready():

$(".banana").draggable(); 

$("body").on("click", "button", function(e){ 
    $(".banana:first").clone().text('new text').; 
}); 

和：

<div class="container"> 
    <button>add</button> 
    <div class="banana">banana 1</div> 
</div> 

那麼，問題是，當我點擊創建div.banana的副本。它不會自動註冊可拖動的事件處理程序。我嘗試了一些，但我是 肯定這不是一個好方法：jsfiddle。

Answer 1

你的新克隆元素都是position: absolute，所以他們都是在另一個之上。

如果你讓你的新元素，使他們不position: absolute和修改各部分，使得它們是不同的，你可以從它們彼此區分開，修改後的jsfiddle似乎爲我在這裏工作的罰款：http://jsfiddle.net/jfriend00/Q8VaT/。

jQuery(document).ready(function(){ 
    $(".banana").draggable(); 

    $(".banana").click(function(e){ 
     alert("Hello original"); 
    }); 

    var cntr = 1; 

    $("body").on("click", "button", function(e){ 
     $(".banana:first").clone().text('new text ' + cntr) 
      .data("item", cntr) 
      .appendTo(".container").draggable() 
      .click(function(e){ 
       alert("Hello new " + $(this).data("item")); 
      }); 
     ++cntr; 
    }); 

});