jquery - jQuery：如何为新的附加元素应用相同的预定义行为？

Question

我有一类 div 标签的 click 方法

<div id="wrapper">
<div class="detail">abc</div>
<div class="click">click here</div>
<div ckass="click">click here</div>
</div>
<script>

${.click}.click(function(){
$(#wrapper).append("<div class="click">added</div>");
});
</script>

当我单击“单击此处”时，脚本添加了新的 div。但是当我试图点击新添加的 div 时，什么也没发生。请告诉我如何使新添加的也可点击。非常感谢。

Answer 1

您可以使用该on()方法。然后它也适用于新添加<div>的：

$('#wrapper').on('click', '.click', function (event) {
    $('#wrapper').append("<div class='click'>added</div>");
});

如果您想使用bind()作为click(f)代理的 ，bind('click', f)请执行以下操作：

var handler = function (event) {
    $('<div class="click">added</div>')
        .appendTo($("#wrapper"))
        .bind('click', handler);
};
$('.click').click(handler);

Answer 2

有一些拼写错误。试试这段代码：

<div id="wrapper">
<div class="detail">abc</div>
<div class="click">click here</div>
<div class="click">click here</div>
</div>
<script>

var handler = function (event) {
$('<div class="click">added</div>').appendTo($("#wrapper")).bind('click', handler);
};
$('.click').click(handler);
</script>

Answer 3

尝试.on()处理程序，在您的情况下，您将事件绑定到直接<div class='click'>added</div>元素，这些元素在之后插入 dom 时存在于 dom 中，因此单击它将不起作用，为此您必须将事件委托给现有的最近的父元素，即#wrapper或您可以直接调用它，它是 dom 中所有元素的父级document：#wrapper

$('#wrapper').on('click', '.click', function(){
   $('#wrapper').append("<div class='click'>added</div>");
});

看看这个：http://jsfiddle.net/RcPnN/

Answer 4

你可以这样做 ：

<div id="wrapper">
<div class="detail">abc</div>
<div onclick='Add()'>click here</div>
<div onclick='Add()'>click here</div>
</div>
<script>
function Add(){
$("#wrapper").append("<div onclick='Add()'>added</div>");
}
</script>