javascript - 动态添加的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 开发工具:

<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();})`;