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

Question

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

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

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

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

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

Answer 1

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

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

Answer 2

是的，你可以这样做：

$('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，您可以使用在您想要分配事件处理程序时已经存在于DOM中的'#button'的最近祖先。