Question

我制作了以下代码来澄清问题：

HTML：

<body>
<div class="static">This is a static div</div>
 <button class="add-dynamic-button">Click me to add a new button</button>
</body>

JS：

$(function(){
$('.add-dynamic-button').on("click",function(){
    $('body').append("<button class='dynamic-button'>Click me to add a dynamic div'</button>");
});
    $('.dynamic-button').on('click',function(){
        $('body').append("<div class='dynamic-div'>This is a dynamic div</div>");
});
});

这是jsfiddle to test：http://jsfiddle.net/6ZN5J/

当我在第一个点击处理程序中有$（＆＃39; .dynamic-button＆＃39;）on（＆＃39; click＆＃39;）处理程序时，会添加.dynamic-div。但是当我将它放在第一个单击处理程序范围之外时（如上例所示），没有任何反应。我最初认为$ .on适用于尚未创建的任何DOM元素，但现在事实证明它适用于同一类或类型的新元素（如果它们已经在DOM中或者$ .on放在里面）创建这些元素的函数。你能澄清为什么会发生这种情况吗？是否有任何方法允许在创建它们的处理程序之外的动态创建元素上使用事件处理程序？感谢

Answer 1

$()是一个选择器。它会找到文档中的元素或您在执行此操作时从中执行整个查询的父元素。

如果您想要更多按钮绑定到click事件，您需要手动绑定它们：

 $('body').append("<button class='dynamic-button'>Click me to add a dynamic div'</button>")
         .on("click", ....);

如何借助此事件处理程序创建的元素动态地在事件处理程序之外附加元素？

1 个答案: