Question

这是modal

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

所以，点击＆＃34;是＆＃34;按钮应该调用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
}());

如果看到更多代码很难给你更好的建议。

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

1 个答案: