每次打开模态时，模态中的 Javascript 都会重复答案

【问题标题】：Javascript inside a modal duplicated everytime I open the modal每次打开模态时，模态中的 Javascript 都会重复
【发布时间】：2017-09-21 04:04:49
【问题描述】：

我有一个引导模式，里面有一个表单和 javascript。

我的模态内容（由 ajax 调用）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="action">Submit</button>

<script>
    $('.action').on('click', function(){
        alert('ok');
    });
</script>

每次我点击我的按钮时，我都会显示很多警报（不仅仅是一个），当我一次又一次地打开和关闭模态时，模态内的 javascript 不会被重置/杀死。

【问题讨论】：

不要明白——你在模态框里有一个警报，如果你打开和关闭模态框很多次，它会在你每次打开模态框时执行。那有什么问题？您根本不想要警报吗？
每次打开模态时，我都想在模态中重置/杀死我的 JS。如果我的模态中的 .action 按钮更新了我的数据库中的值（通过 ajax），我不希望每次单击按钮时都有 10 个 ajax 查询，因为每次打开模态时 JS 都会重复。
在关闭模态框之前关闭警告框吗？
是的，这只是一个例子，如果我尝试使用 console.log('test') 并打开/关闭 5 个模式，当我打开一个新模式时，我的控制台中有 5 行仅用于此点击。
你能在jsfiddle.net上复制这个吗

标签： javascript modal-dialog

【解决方案1】：

您似乎使用 AJAX 请求在模态框内设置了 <script> 标记。因此，每次您调用 AJAX 请求时，都会执行一个新的 <script> 标记，并将一个新事件绑定到按钮。这就是您显示多个警报的原因。

要解决这个问题，只需将 JS 与 modal 隔离或仅设置一次，而不是从 AJAX 调用中设置它。只需将其设为静态 <script> 标记即可。

否则在绑定新的单击事件之前销毁现有的事件处理程序。因为即使您删除了<script> 标签，事件仍然绑定到元素。

【讨论】：

【解决方案2】：

我已经解决了我的问题，我不是直接在提交按钮（ajax 返回内的按钮）上听点击事件，而是在模态包装器上，我将我的 JS 放在模态之外：

$('#modal-wrapper').on('click', '#my-submit-btn', function () { ...

现在，JS 可以正常工作并且不会重复。

【讨论】：