如何为新注入的 HTML 附加 jQuery 事件处理程序

Question

如果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，则头部和身体标签使用 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 将事件从事件目标向上冒泡 到附加到处理程序的元素(即，最里面的 最外层元素(，并沿该元素运行任何元素的处理程序 与选择器匹配的路径。