jquery - 在元素存在之前注册 DOM 事件

Question

这似乎不起作用，因为它执行的顺序。

$('#button').on('click', function () { alert('hi'); });

$('<button id=button>hi</button>').appendTo($('body'));

还有办法完成这样的事情吗？

出于特殊原因，我需要在 DOM 元素实际存在之前注册事件。

Answer 1

是的，你可以这样做：

$('body').on('click', '#button', function () { alert('hi'); });

$('<button id=button>hi</button>').appendTo($('body'));

第一行之所以有效，是因为它将事件处理程序设置为body，但'#button'参数确保仅当事件发生在 时才调用处理程序#button。您可以使用它（使用任何 CSS 选择器代替'#button'）将事件处理程序预分配给任何类型的动态插入元素。

见：http ://api.jquery.com/on/

理想情况下，代替body您使用在'#button'您想要分配事件处理程序时已经存在于 DOM 中的最近祖先。

Answer 2

使用.on()并委托最近的静态元素

$('body').on('click','#button',function(){
   alert("hi");
});