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 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()处理程序，在你的情况下，你绑定事件来指导dom中存在的元素，而<div class='click'>added</div>之后插入dom，所以点击它将无效，为此你有将事件委托给现有的#wrapper最近的父元素，或者您可以直接调用document代替#wrapper，而$('#wrapper').on('click', '.click', function(){ $('#wrapper').append("<div class='click'>added</div>"); });是dom中所有元素的父级：

{{1}}

在行动中看到这一点： 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>

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

4 个答案: