Fatal编程技术网
  • javascript/
  • Javascript jQuery表单被多次提交

Javascript jQuery表单被多次提交

javascript jquery html forms

Javascript jQuery表单被多次提交,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我在代码中实现了一个简单的lightbox。点击#makePayment链接，打开一个灯箱，灯箱中有一个表单。当用户单击#paymentDetailsConfrimLB提交表单时，我刚刚显示了一个警报 $("#paymentDetailsConfrimLB").click(function( event ) { alert('form submission happened.'); event.preventDe

我在代码中实现了一个简单的lightbox。点击
#makePayment
链接，打开一个灯箱，灯箱中有一个表单。当用户单击
#paymentDetailsConfrimLB
提交表单时，我刚刚显示了一个警报

            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//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

            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB
问题是，当我第一次加载页面，打开lightbox并单击submit按钮时，警报会显示一次（正如它应该显示的那样），但如果我关闭lightbox，重新打开它，然后提交表单，它会提交两次，警报会显示两次。类似地，如果我再次关闭并重新打开lightbox，在提交表单时，警报会显示3次，并且会继续这样

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

$(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;
});
您知道如何解决此问题吗？

您正在设置每次打开lightbox时单击回调。尝试将单击回调移出#支付：

$("#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

            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB
每次打开lightbox时都要设置click callback。尝试将单击回调移出#支付：

$("#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

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

            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB
可以说，它会添加到单击队列中。因此，如果您将多个单击事件添加到某个内容中，则默认情况下会添加所有单击事件并运行所有单击事件。您没有注意到这一点，因为您的所有其他函数都与多次运行无关

            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB
解决此问题的一种方法是在函数中进行检查

            $("#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
          }
问题是：

            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB
可以说，它会添加到单击队列中。因此，如果您将多个单击事件添加到某个内容中，则默认情况下会添加所有单击事件并运行所有单击事件。您没有注意到这一点，因为您的所有其他函数都与多次运行无关

            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB
解决此问题的一种方法是在函数中进行检查

            $("#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
          }
每次单击“提交”按钮时，都会绑定新的处理程序。您只需要定义一次处理程序，它将在该操作发生时执行。否则，将执行绑定的每个处理程序

            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB
如果您确实需要以现在的方式绑定处理程序，那么您也可以使用
.one
，它只会第一次为每个元素绑定处理程序

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


            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB
将处理程序附加到元素的事件。处理程序被执行 每个事件类型的每个元素最多一次

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

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

$(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;
});
每次单击“提交”按钮时，都会绑定新的处理程序。您只需要定义一次处理程序，它将在该操作发生时执行。否则，将执行绑定的每个处理程序

            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB
如果您确实需要以现在的方式绑定处理程序，那么您也可以使用
.one
，它只会第一次为每个元素绑定处理程序

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


            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB
将处理程序附加到元素的事件。处理程序被执行 每个事件类型的每个元素最多一次

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

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

$(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;
});
除了卡文的方法，另一种解决方案也对我有效。我刚刚在event.preventDefault（）方法之后添加了这一行：

            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB
它解决了这个问题。

除了卡文的方法，另一个解决方案也对我有效。我刚刚在event.preventDefault（）方法之后添加了这一行：

            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB
它解决了这个问题。

您是否尝试将这些内部单击处理程序移到
$（“#makePayment”）之外。单击（函数（）{
？当我从
#makePayment
函数中回调时，它们根本不起作用。代码不会到达那里，也不会显示警报。您是否尝试将这些内部单击处理程序移到
$（“#makePayment”）之外。单击（函数（）{
？当我从
#makePayment
函数中回调时，它们根本不起作用。代码没有到达那里，也没有显示警报。当我从
#makePayment
函数中回调时，它们根本不起作用。代码没有到达那里，也没有显示警报。然后你应该使用jquery的
一个
作为@Kevin suggest当我从
#makePayment
函数中回调时，它们根本不起作用。代码没有到达那里，也没有显示警报。然后你应该使用jquery的
one
，正如@Kevin SuggestGreg所建议的那样，这一方法的问题是，假设用户错误地填写了一些值，提交了表单，出现了一些问题显示lidation错误，他/她更正该错误并重新提交，重新提交不会发生，因为标志设置为true。如果我错了，请更正我。不，它会从第一次分配中留下单击事件。因此表单将提交，验证仍将发生。然后…我想这就是stackoverflow的优点，我一直在努力解决这个问题过去3天的问题，在这里发布后的半小时内，我发现了3种完全不同但非常有效的方法来解决问题…回答很好Greg，但这种方法的问题是，假设用户错误地填写了一些值，提交了表单，出现了一些验证错误，他/她纠正了这一点，然后重新开始ubmits，重新提交不会发生，因为标志被设置为true。如果我错了，请纠正我。不，它会从第一次分配中留下单击事件。因此表单将提交，验证仍将发生。我想这就是stackoverflow的美妙之处，我在过去3天中一直在努力解决这个问题，在p的半小时内在这里，我发现了3种完全不同但非常有效的方法来解决这个问题……即使不使用一种方法，它也能工作。你能告诉我为什么要使用
dot
来组合所有事件侦听器吗，因为当我像莱兹建议的那样创建单独的事件侦听器时，它不起作用。可能有多种原因。在我的例子中示例我们正在将处理程序绑定到文档，以便它能够处理动态元素。Ledzz answer也做了同样的事情，但处理程序绑定到元素，这意味着在运行代码时它们必须存在。请查看jQuery
。on
文档…在jQuery中，您可以

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