javascript - jQuery 表单被多次提交

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

除了 Kavin 的方法之外，另一种解决方案也对我有用。我刚刚在 event.preventDefault() 方法之后立即添加了这一行:

  event.stopImmediatePropagation()

它解决了这个问题。