Javascript EventListener在替换innerHTML后不工作

我正在写一个测试工具。在我的工具中，我有一个显示数据库中所有testsuite的菜单。当用户单击testsuite名称时，它将显示testsuite的内容。首先，我向每个

子菜单添加
eventlistener
。但每次用户导入或删除testsuite时，我都必须更新菜单，并向新的
子菜单添加新的
eventlistener
。我使用jade生成一个HTML代码，并用这个新的替换旧的菜单内容。但问题是新的
eventlistener
没有附加到新的子菜单。当我点击
子菜单时，什么也没有发生。那么请告诉我发生了什么，我必须做什么

这是我最初的玉码：

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

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

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

及

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

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

及

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


添加子元素：
添加相邻元素
删除子元素：
替换子元素：（断开事件侦听器）
通过使用
.innerHTML
参数修改元素，基本上可以将HTML重新写入页面，从而中断所有事件侦听器。如果要使用事件侦听器更改元素，则需要在修改元素后重新绑定该事件侦听器。但是，您通常可以修改元素而不中断附加到元素的事件侦听器：


添加子元素：
添加相邻元素
删除子元素：
替换子元素：（断开事件侦听器）