javascript - 替换innerHTML后，EventListenner不起作用

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

首先是我的玉器代码：

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}");
      });
});

最佳答案

在动态生成的元素上，最好将事件侦听器绑定到外部元素或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}");
});

关于javascript - 替换innerHTML后，EventListenner不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31779280/