javascript - 替换innerHTML后EventListener不起作用

Question

我正在编写一个测试工具。在我的工具中，我有一个菜单显示数据库中的所有测试套件。当用户单击测试套件名称时，它将显示测试套件的内容。首先，我将 eventlistenner 添加到每个子菜单。但是每次用户导入或删除测试套件时，我都必须更新菜单，并将新的 eventlistenner 添加到新的子菜单。我使用 jade 生成 HTML 代码，并用新菜单内容替换旧菜单内容。但问题是新的 eventlistenner 没有附加到新的子菜单。当我单击子菜单时，没有任何反应。那么请告诉我发生了什么事以及我必须做什么？

这是我最初的 Jade 代码:

li(id="RunTestsuite")
                a Run Testsuite
                ul
                    each testsuite in list.listTS
                        li(id="#{testsuite.ID}"): a #{testsuite.ID} - #{testsuite.Name}
                        script.
                            $("#RunTestsuite li##{testsuite.ID}").on("click", function(){
                                socket.emit("open testsuite", "#{testsuite.ID}", true);
                            });

如果数据库有任何更新，这就是我将替换#RunTestsuite的innerHTML:

each testsuite in list
   li(id="#{testsuite.ID}"): a #{testsuite.ID} - #{testsuite.Name}
each testsuite in list
   script.
      window.onload(function(){
         $("##{type} li##{testsuite.ID}").off();
         $("##{type} li##{testsuite.ID}").on("click", function(){
            socket.emit("#{command}", "#{testsuite.ID}");
      });
});

Answer 1

在动态生成的元素上，最好将事件监听器绑定(bind)到外部元素或 body，例如

$("body").on("click", "#RunTestsuite li##{testsuite.ID}", function(){
    socket.emit("open testsuite", "#{testsuite.ID}", true);
});

和

//$("##{type} li##{testsuite.ID}").off();
$("body").on("click", "##{type} li##{testsuite.ID}", function(){
    socket.emit("#{command}", "#{testsuite.ID}");
});