模态弹出窗口无法正常工作，它多次调用函数 - 单击事件处理程序运行多次

Question

这里是模态

的JSP代码

<div class="modal hide fade" id="showDupZip">
    <div class="modal-header portlet box bd-grey ">

            <div class="portlet-title">
                <button type="button" class="close" id="closeModal1" data-dismiss="modal" aria-hidden="true"></button>
            </div>

    </div>
    <div class="modal-body">
        <BUTTON class="btn login-blue"
            id="yes" type="button" data-dismiss="modal">Yes</BUTTON>
            <BUTTON class="btn login-blue"
            id="cancel" type="button" data-dismiss="modal">Cancel</BUTTON>
    </div>
</div>

这里是java脚本代码

function showModal1(r1,r2,r3){
    $('#showDupZip').removeClass('hide');

    $('#showDupZip').modal({
        backdrop : 'static',
        keyboard : false
    }).on('click', '#yes', function() {
        $('#loading-overlay1').show();
        $('#loading-message1').show();
        checkMaxCount(r1,r2,r3);
        }

    });
}

    function checkMaxCount(r1,r2,r3)
    {
      //some code here
    }

因此，单击 "yes" 按钮应该会调用 checkMaxCount() 函数。

我讲的是一个场景

假设这个弹出窗口出现了，我点击了两次取消按钮，两次弹出窗口都关闭了，但第三次我点击了是按钮，然后 checkMaxCount() 函数执行了三次。我在该功能中发出警报，警报出现了三次。意味着每次模态出现时，它都会在单击“是”按钮后多次执行该功能。我不明白为什么会出现这个问题。 checkMaxCount() 函数应该只执行一次。

Answer 1

问题是您每次打开模式时都在订阅该事件。因此，它被处理的次数与它被打开的次数相同。

您应该订阅点击处理程序，即只调用一次 .on('click',...)。为此，将其移出 showDialog 函数。（别担心，这是很多人都会犯的经典错误）。

如评论中所述，如果将事件注册移到函数外部，则不再可能将 r1, r2, r3 值传递给处理程序。为了能够在处理程序中使用这些值，您可以将它们提取到外部作用域中的变量，以便可以从该作用域修改它们，并从处理程序的内部作用域进行访问：

// Define the vars in outer level

var r1,r2,r3;

$('#showDupZip').on('click', '#yes', function() {
    $('#loading-overlay1').show();
    $('#loading-message1').show();
    // Use them here
    checkMaxCount(r1,r2,r3);
}

function showModal1(){
    $('#showDupZip').removeClass('hide');

    $('#showDupZip').modal({
        backdrop : 'static',
        keyboard : false
    });
});

通过此更改，您只需在调用 show modal 之前设置变量，而不是将它们作为参数传递。

var r1=1; var r2=2; var r3=3;
showDialog();

当然这是解释如何做的最简单的方法。但是 ypu 应该给你的代码一个更好的结构，例如将它包含在里面并且 IIFE 避免污染全局上下文。

(function() {
   var r1,r2,r3;
   // The rest of the code here
}());

没有看到更多的代码很难给你更好的建议。

模态弹出窗口无法正常工作，它多次调用函数 - 单击事件处理程序运行多次

Modal popup is not working properly, its calling a function multiple times - click event handler runs several times

javascript

jquery

bootstrap-modal