在动态按钮上附加事件处理程序“.on（）”

Question

我有一个button动态添加到页面上（通过小胡子）。

上面有一堂课。

但是当我点击此按钮时，不会执行JQuery方法。

我的HTML：

<div id="layout"></div>

我的HTML带有动态添加的按钮：

<div id="layout">
    <a href="#" class="hello">Hello</a>
</div>

我的jQuery：

$(function(){
    $('.hello').on('click', function(e){
        e.preventDefault();
        console.log('Hello');
    });
});

Answer 1

你不能在不存在的元素上使用on()，将它们分配给存在的第一个包装器（理想情况下是id），并使用另一个参数告诉jQuery在选择器中查找类：

$('#layout').on('click', '.hello', function(e){ /* ... */ });

＆＃34;我不能将所有内容添加到文档中吗？＆＃34;
是的，你可以，但你不应该。每当你点击某个东西时，它就会上升到DOMtree：
 1.您单击一个按钮，它会触发点击事件
 2.当有父母时，触发父母的点击事件  3.完成最后一个（文档）后，停止。

正如你所看到的，如果你有很多html，第2步可能是一个沉重的步骤。绑定事件为＆＃39; local＆＃39;尽可能采用首选方法。