Jquery多次提交表单

Question

我正在创建由表单组成的模态窗口.出于某种原因,我第一次提交表单时,它的工作原理.但是,当我第二次提交表单(没有页面重新加载)时,它会提交表单两次.当我第三次提交时,我会收到三份提交 - 依此类推.

这是代码

  $(function() {

levels = ['Expert',
          '1',
          'Advanced',
          '2',
          'Intermediate',
          '3',
          'Basic',
          '4',
          'Entry',
          '5'
          ]


// load the modal window
$('a.modal').click(function(){
    var req_name=this.id;
    // scroll to top
    $('html, body').animate({scrollTop:0}, 'fast');


    var selectField = document.getElementById("category");

    if(req_name=='task')
        {
        selectField.style.display = "none";
        }
    else{

    selectField.options.length = 0;
    for (i=0; i<levels.length; i=i+2) 
    {
        selectField.options[selectField.options.length] = new Option(levels[i],levels[i+1]);

     }
    }

    $.ajaxSetup ({
        cache: false
    });

    // before showing the modal window, reset the form incase of previous use.
    $('.success, .error').hide();
    $('form#contactForm').show();

    // Reset all the default values in the form fields

    $('#name').val('');
    $('#element_id').val('');
    $('#category').val('');

    //show the mask and contact divs
    $('#mask').show().fadeTo('', 0.7);
    $('div#contact').fadeIn();


    $('input#submit').click(function(event) {

        //Inputed Strings
        var name = $('#name').val(),
            element_id = $('#element_id').val()

            //No Errors?
            event.preventDefault();

            event.stopPropagation() 
        $.ajax({
            url: '/add_requirement/',
            dataType: 'json',
            data: {req_name:req_name,
                   name:name,
                   element_id:element_id
                   },
            traditional: true,
            success: function(msg){

                alert(msg.word)
                $('#contactForm').reset();
              }
         });

        var tab = document.getElementById(req_name+'_formset_table');
        id = (tab.rows.length)-1; 
        var BODY = tab.getElementsByTagName('tbody')[0];
        var TR = document.createElement('tr');
        var TD1 = document.createElement('td');
        TD1.setAttribute("id","detail_resp");
        var TD2 = document.createElement('td');
        TD2.setAttribute("id","level");
        var TD3 = document.createElement('td');

        var TD4 = document.createElement('td');
        //TD4.setAttribute("id","level");

        var new_req = document.createElement("input");
        new_req.value = name;
        new_req.setAttribute("name", req_name+"_formset-"+id+"-"+req_name);

        var imp = document.createElement("input");
        imp.setAttribute("name", req_name+"_formset-"+id+"-importance");


        var level_field = document.createElement('SELECT');
        level_field.setAttribute("name", req_name+'_formset-'+id+'-level');

        level_field.options.length = 0;
        for (i=0; i<levels.length; i=i+2) 
        {
            level_field.options[level_field.options.length] = new  Option(levels[i],levels[i+1]);

         }



        var check_box = document.createElement("input");
        check_box.setAttribute("type","checkbox");
        check_box.setAttribute("id","delete_checkbox");
        check_box.setAttribute("name", req_name+"_formset-"+id+"-DELETE");

        TD1.appendChild(new_req);
        TR.appendChild (TD1);
        TD2.appendChild(imp);
        TD3.appendChild(level_field);
        TR.appendChild (TD2);
        TR.appendChild (TD3);
        TD4.appendChild(check_box);
        TR.appendChild (TD4);
        BODY.appendChild(TR);
        count = (tab.rows.length)-1; 
        total_forms = document.getElementById('id_'+req_name+'_formset-   TOTAL_FORMS');
        total_forms.value = count       

        return false;
    });





    // stop the modal link from doing its default action
    return false;
});

// close the modal window is close div or mask div are clicked.
$('div#close, div#mask').click(function() {
    $('div#contact, div#mask').stop().fadeOut('slow');

});

$('#contactForm input').focus(function() {
    $(this).val(' ');
});

$('#contactForm textarea').focus(function() {
    $(this).val('');
   });

// when the Submit button is clicked...


   });

提前致谢

Answer 1

您将点击处理程序绑定到每个a.modal点击事件的提交按钮.

$('a.modal').click(function(){
[...]
    $('input#submit').click(function(event) {

您可能a.modal不止一次点击,因此最终将多个处理程序绑定到提交按钮,并且每次单击提交按钮时它们都会触发.

这就是您看到增量提交的原因

• 第一次打开模态时,一个处理程序绑定,单击提交按钮时一个提交
• 第二次打开模态,另一个处理程序绑定(现在总共两个),两个提交
• ...等等.

你可以试试:

• 绑定提交的外单击处理a.modalclick处理程序
• 如果出于任何原因必须在a.modal单击中 绑定它,则在绑定另一个之前解除当前单击处理程序的绑定
  • 这可以通过调用.off('click')(jQuery 1.7)或unbind('click')(jQuery 1.4)来完成