动态HTML无法识别[重复]

Question

这个问题在这里已有答案：

• Event binding on dynamically created elements? 23回答

我有一个非常轻量级的单页应用程序，有一个共同的页眉+页脚和一个动态的中间件。在这个中间部分的一个视图中是一个动态表，其中最后一列中有一个“确认”按钮。如果这是第一个加载的视图，单击该按钮可创建正确的函数调用。如果在第一次整页加载后交换它，我的核心javascript中的函数不会被调用。

我正在使用以下内容在页面加载后注入HTML模板

$('#view2_button').click(function() {
    $.get("/view2", function(data, status) {
        document.getElementById("mainview").innerHTML = data;
    });
});

这里是“确认”按钮的javascript，它位于局部视图“view2”的动态表中。同样，如果“view2”是加载应用程序时呈现的第一个局部视图，则此代码完全按预期工作。

$('td.confirm').click(function() {

            toggleOverlay();
            const confirmId = this.id.split('_')[1];
            if(confirm(  'By clicking OK, you are confirming:\n'
            //...
    //...

});

唯一的解决方案是将“OnClick（）”嵌入到按钮div本身，还是有一种正确的方法可以将代码与标记分开，而不必依赖像Angular，React或Vue这样重的东西？

Answer 1

使用委派的事件处理程序。

$( document ).on( 'click', 'td.confirm', function() {