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.modal点击处理程序
在绑定另一个处理程序之前取消绑定当前单击处理程序，如果由于某种原因您必须在a.modal单击中绑定它
- 这可以通过调用.off('click')（jQuery 1.7）或unbind('click')（jQuery 1.4）

Answer 2

它可能与页面生命周期中绑定click事件的位置有关。尝试移动它或在绑定

之前删除单击绑定（“清除”以前的绑定）

$('a.modal').unbind('click');
$('a.modal').click( function { ... } );

我会尝试第二个选项来检查是否存在问题，如果是，则尝试找到放置该指令的适当位置（也许是document.ready）

Answer 3

我认为你没有在每次提交后关闭模态窗口，你只是在做

fadeout();

由于这个原因，早期的模态窗口仍然存在，因此形式。

Jquery多次提交表单

3 个答案: