點擊事件沒有得到克隆

使用Jquery 1.10我克隆了一個div，其中包含一個單擊事件定義的按鈕。 div被克隆，但不是點擊事件。點擊事件沒有得到克隆

我見過這個問題很多次（例如：Click action from cloned element does not work），所有答案都建議使用clone（true）或clone（true，true）。

這似乎並沒有在這種情況下工作。

我做了一個小的工作示例：（FIDDLE LINK：http://jsfiddle.net/wD3dq/1/）

HTML：

<html> 
<body> 
    <a href=# " id="clickMe">Click Me to add a new Div</a> 
    <div id="elementHolder"> 
     <div id="webThumb5"> 
      <p>Test1 <a href="# " class="del_button " role="button ">Delete</a></p> 
     </div> 
     <div id="webThumb6"> 
      <p>Test2 <a href="# " class="del_button " role="button ">Delete</a></p> 
     </div> 
     <div id="webThumb7"> 
      <p>Test3 <a href="# " class="del_button " role="button ">Delete</a></p> 
     </div> 
    </div> 
    <div id="divTemplate" style="display:none "> 
     <p>Test <a href="# " class="del_button " role="button ">Delete</a></p> 
    </div> 
</body> 
</html>

CSS：

#elementHolder div { 
    border: 1px solid black; 
    display:inline-block; 
    padding: 0.5em; 
    margin: 0.2em; 
}

JS：

var counter = 100; 
$(document).ready(function() { 
    $("#elementHolder a.del_button").click(function (event) { 
     event.preventDefault(); 
     var parentDiv = $(event.target).parent().parent(); 
     alert("Id: " + parentDiv.attr('id')); 
    }); 
    $("#clickMe").click(function (event) { 
     counter += 1; 
     var newId = "webThumb" + counter; 
     var newDiv = $("#divTemplate").clone(true, true); 
     newDiv.attr("id", newId).prependTo("#elementHolder"); 
     newDiv.fadeIn(500); 
    }); 
});

有什麼建議麼？

來源

2013-11-20 Enoon

爲什麼不使用起泡，而不必擔心克隆的事件。 $（「＃elementHolder」）。on（「click」，「a.del_button」，function（）{}）;' – epascarello

由於沒有要克隆的事件，它不克隆該事件。

你永遠不會指定一個點擊事件到divTemplate，你只能做到elementHolder，而divTemplate不是它的子節點。

擺脫擔心克隆事件，只是使用冒泡

$("#elementHolder").on("click", "a.del_button", function (event) { 
    event.preventDefault(); 
    var parentDiv = $(this).closest("div"); 
    alert("Id: " + parentDiv.attr('id')); 
});

來源

2013-11-20 18:05:52 epascarello

感謝澄清_why_它不起作用。 – Enoon

即使使用代表團：

$("#elementHolder").on("click", "a.del_button", function() { 
    //do stuff 
});

http://jsfiddle.net/wD3dq/2/

來源

2013-11-20 18:06:45 dave

點擊事件沒有得到克隆

回答

相關問題