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

Question

我的 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>

此代码只显示一次。

Answer 1

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

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

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

Caching problem in dynamically added javascript code

html

javascript

jquery

dom

google-chrome-devtools