Question

我在代码中创建了一个简单的灯箱实现。点击#makePayment链接即可打开一个灯箱，并在该灯箱内有一个表格。当用户点击#paymentDetailsConfrimLB提交表单时，我刚刚显示了提醒。

在我解释这个问题之前，请看一下我写的代码：

       $("#makePayment").click(function() { 
            $("body").addClass("modalPrint");
            var lb = new LightBox("paymentDetailsLB", "675", "500");
            lb.htmlObjRef.style.height = "auto";
            lb.show();
            $("#paymentDetailsCloseLB, .hideBox").click(function() {
                $("body").removeClass("modalPrint");
                lb.hide();
            });//paymentDetailsCloseLB
            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB
          return false;
        });//makePayment

问题是，当我第一次加载页面，打开灯箱，然后单击提交按钮时，警报会显示一次（应该如此），但是如果我关闭灯箱，请重新打开它，然后提交表格，提交两次，警报显示两次。同样，如果我再次关闭并重新打开灯箱，则在表单提交时，警报会显示3次，并且会继续显示。

关于如何解决这个问题的任何想法？

Answer 1

每次打开灯箱时，您都会设置点击回调。尝试从#makePayment中移动点击回调：

$("#makePayment").click(function() { 
    $("body").addClass("modalPrint");
    var lb = new LightBox("paymentDetailsLB", "675", "500");
    lb.htmlObjRef.style.height = "auto";
    lb.show();          
    return false;
 });//makePayment
 $("#paymentDetailsCloseLB, .hideBox").click(function() {
     $("body").removeClass("modalPrint");
     lb.hide();
 });//paymentDetailsCloseLB
 $("#paymentDetailsConfrimLB").click(function( event ) {
     alert('form submission happened.');
     event.preventDefault();
     return false;
 });//paymentDetailsConfrimLB

Answer 2

问题是：

            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB

可以说它会添加到点击队列中。因此，如果您向某些内容添加多个单击事件，则会添加所有这些事件，并且所有这些事件都默认运行。您没有注意到它，因为所有其他功能与多次运行无关。

解决这个问题的方法是在函数中进行检查。

        $("#paymentDetailsCloseLB, .hideBox").click(function() {
            $("body").removeClass("modalPrint");
            lb.hide();

        });//paymentDetailsCloseLB
         pDCLB=$("#paymentDetailsConfrimLB");
         if(!pDCLB.attr('alertc')); //check if the attribute exists, if not, we've never been here before.
             pDCLB.attr('alertc',1); //adds the attribute so we can check it later.
             $("#paymentDetailsConfrimLB").click(function( event ) {
                alert('form submission happened.');
                event.preventDefault();
                return false;
              });//paymentDetailsConfrimLB
          }

Answer 3

每次单击提交按钮时，您都会绑定新的处理程序。您只需要定义一次处理程序，并且只要该操作发生就会执行它。否则，您绑定的每个处理程序都将执行。

如果你绝对需要按照自己的方式绑定处理程序，那么你也可以使用.one，它只会在第一次为每个元素绑定处理程序。

jQuery .one() documentation

将处理程序附加到元素的事件。处理程序已执行每个事件类型每个元素最多一次。

尝试这样的事情。

$(document).on('click', '#makePayment', function() {
  $("body").addClass("modalPrint");
  var lb = new LightBox("paymentDetailsLB", "675", "500");
  lb.htmlObjRef.style.height = "auto";
  lb.show();
  return false;
}).on('click', '#paymentDetailsCloseLB, .hideBox', function() {
  $("body").removeClass("modalPrint");
  lb.hide()
}).on('click', '#paymentDetailsConfrimLB', function() {
  alert('form submission happened.');
  event.preventDefault();
  return false;
});

Answer 4

除了Kavin的方法之外，另一种解决方案对我也有用。我刚刚在event.preventDefault（）方法之后添加了这一行：

  event.stopImmediatePropagation()

它解决了这个问题。

多次提交jQuery表单

4 个答案: