如何为新注入的html附加jquery事件处理程序？

如果还没有生成HTML，我将如何使用.on() ？ jQuery页面说

如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。

但我不确定该怎么做。 有没有办法“重新加载”事件处理程序？

所以，如果我有

 $(document).ready(function(){ $('.test').on('click', function(){ var id = $(this).attr('id'); console.log("clicked" + id); }); generatePage(); }); 

其中generatePage（）用.test创建了一堆div，我将如何重新绑定.on() ？

我知道有类似的问题已被问到，但是在快速搜索之后我找不到我想要的东西。

Answer 1

使用.on，如下例所示。 可以假设body-tag始终可用，因此将事件处理程序附加到body并将事件委托给选择器是安全的，在本例中为.test 。

 $(document).ready(function(){ $('body').on('click', '.test', function(){ // Make your changes here var id = $(this).attr('id'); console.log("clicked" + id); }); generatePage(); }); 

或者如果generatePage（）也生成html，head和body标签使用document作为选择器。

 $(document).ready(function(){ $(document).on('click', '.test', function(){ // Make your changes here var id = $(this).attr('id'); console.log("clicked" + id); }); generatePage(); }); 

根据jquery文档 .on接受以下参数：

 .on( events [, selector] [, data], handler(eventObject) ) 

包括选择器描述如下：

提供选择器时，事件处理程序称为委托。 当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标起泡到附加处理程序的元素（即最里面到最外层的元素），并为匹配选择器的路径上的任何元素运行处理程序。