Question

我有一个带有表单和javascript的bootstrap模式。

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

＆＃13;

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

＆＃13;

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

Answer 1

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

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

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

Answer 2

我已经解决了我的问题，我没有直接在提交按钮上听到click事件（ajax返回内部的按钮），但在模态包装器上，我将JS 放在模式下：< / p>

$（'＃modal-wrapper'）。on（'click'，'＃my-submit-btn'，function（）{...

现在，JS工作并没有重复。

每次打开模态时，模态内的Javascript都会重复

2 个答案: