點擊事件未克隆
[英]On click event not getting cloned
問題描述
使用Jquery 1.10，我正在克隆一個div，其中包含一個定義了click事件的按鈕。 div被克隆，但click事件未被克隆。
我已經多次問過這個問題（例如： 從克隆元素中單擊操作無效 ），所有答案都建議使用clone（true）或clone（true，true）。
在這種情況下，這似乎不起作用。
我做了一個小的工作示例：（鏈接： 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);
});
});
有什么建議么？
2 個解決方案
解決方案1
1 已采納 2013-11-20 18:05:52
它沒有克隆事件，因為沒有要克隆的事件。
您永遠不會將click事件分配給divTemplate ，而只將其分配給divTemplate並非其子級的elementHolder。
擺脫擔心克隆事件的煩惱，只需使用冒泡
$("#elementHolder").on("click", "a.del_button", function (event) {
event.preventDefault();
var parentDiv = $(this).closest("div");
alert("Id: " + parentDiv.attr('id'));
});
解決方案2
0 2013-11-20 18:06:45
使用甚至委托：
$("#elementHolder").on("click", "a.del_button", function() {
//do stuff
});
jQuery-cloned div沒有響應click事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.