动态添加的javascript代码中的缓存问题答案

【问题标题】：Caching problem in dynamically added javascript code动态添加的javascript代码中的缓存问题
【发布时间】：2020-07-11 13:24:06
【问题描述】：

我的 HTML 页面中有一个 div：

<div id="dynamicScript"></div>

我在文本框模糊操作上生成动态JS代码：

var dynamicScriptText = `$(document).on('click','#${id}',function(){alert();});`;

现在，我已经使用 JS 创建了一个脚本。但是如果脚本已经存在，我会先删除它，然后使用动态 id 重新生成它并将其附加到我的dynamicScript DIV：

        var id = "ControlTool10706547031";
        var elem = document.getElementById("script" + id);
        if(elem){
            elem.parentNode.removeChild(elem);
        } 
        var script;
        script = document.createElement('script');
        script.type = 'text/javascript';
        script.id = "script" + id;
        script.innerHTML = dynamicScriptText;
        var dynSc = document.getElementById('dynamicScript');
        dynSc.appendChild(script);

当我在 Chrome DevTools 中检查元素时，此代码会生成以下输出：

<div id="dynamicScript">
    <script type="text/javascript" id="scriptControlTool10706547031">
         $(document).on('click','#ControlTool10706547031',function(){alert();});
    </script>
</div>

在这里，#ControlTool10706547031 是一个按钮，单击它我试图显示一个警报。但问题是，在文本框模糊上，虽然我每次都通过以下代码删除脚本，然后再重新附加它：

var elem = document.getElementById("script" + id);    
if(elem){
         elem.parentNode.removeChild(elem);
}

它以某种方式缓存生成的 JS 代码，假设如果我运行我的文本框模糊操作 5 次，当我点击我的按钮 #ControlTool10706547031 时，警报消息会出现 5 次，尽管当我在 Chrome DevTools 中检查元素时：

<div id="dynamicScript">
    <script type="text/javascript" id="scriptControlTool10706547031">
         $(document).on('click','#ControlTool10706547031',function(){alert();});
    </script>
</div>

此代码仅显示一次。

【问题讨论】：

删除脚本元素不会删除监听器或已经运行的代码。
@palaѕн $(document).off('click','#${id}') 工作！感谢您的帮助。
我已将其添加为包含更多详细信息的答案。

标签： javascript jquery html dom google-chrome-devtools

【解决方案1】：

您可以在此处使用.off() 方法。 .off() 方法删除了与.on() 关联的事件处理程序。不带参数调用 .off() 会删除所有附加到元素的处理程序。通过提供事件名称、命名空间、选择器或处理函数名称的组合，可以在元素上删除特定的事件处理程序，例如：

`$(document).off('click','#${id}').on('click','#${id}',function(){alert();})`;

【讨论】：