在元素存在之前注册 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/

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