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

Question

如果尚未生成 HTML，我将如何使用 .on()？ jQuery 页面显示

If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.

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

如果我有

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

其中generatePage()使用.test创建一堆div，我如何重新绑定(bind).on()？

我知道有人问过类似的问题，但快速搜索后我没有找到我要找的内容。

Answer 1

使用 .on，如下例所示。人们可以假设 body 标记始终可用，因此可以安全地将事件处理程序附加到 body 并将事件委托(delegate)给选择器，在本例中为 .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 documentation .on 接受以下参数:

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

包括选择器描述如下:

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.