Question

使用Jquery 1.10我正在克隆一个div，其中包含一个定义了click事件的按钮。 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);
    });
});

有什么建议吗？

Answer 1

它没有克隆事件，因为没有要克隆的事件。

您永远不会将点击事件分配给divTemplate，您只能将其执行到divHmpder不是div的孩子。

摆脱担心克隆事件并只使用冒泡

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

Answer 2

甚至使用委托：

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

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

点击事件未被克隆

2 个答案: