替换innerHTML

Question

我正在写一个测试工具。在我的工具中，我有一个菜单，显示数据库中的所有测试套件。当用户点击测试套件名称时，它将显示测试套件的内容。首先，我将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);
                            });

如果DB有任何更新，我将替换#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

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

Answer 2

通过使用.innerHTML参数修改元素，您基本上可以将HTML重写到页面，从而破坏所有事件侦听器。如果要使用事件侦听器更改元素，则需要在修改元素后重新绑定该事件侦听器。但是，您通常可以在不破坏附加到它的事件侦听器的情况下修改元素：

• 添加子元素：.appendChild
• 添加邻居元素.insertBefore
• 删除子元素：.removeChild
• 替换子元素：.replaceChild（打破事件侦听器）