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, чем один раз, и, следовательно, в конечном итоге привязки несколько обработчиков для кнопки отправки, и все они огнь каждый раз, когда кнопка нажата представить.

Вот почему вы видите инкрементной представления

• Первый раз при открытии модального, один обработчик обязан, один представление, когда кнопка отправки нажата
• Второй раз, когда вы открываете модальный, другой обработчик обязан (теперь всего два), две заявки
• ... и т. д.

Вы можете попробовать:

• Binding отправка обработчик щелчок вне обработчика a.modal щелчка
• Несвязанности текущего обработчика щелчка перед переплетом другой, если по какому-либо причине вы должны связать это в пределах a.modal нажмите
  • Это может быть сделано путем вызова .off('click') (JQuery 1.7) или unbind('click') (Jquery 1,4)

Answer 2

Это, возможно, придется делать с тем, где на жизненном цикле страницы вы связывание события щелчка. Попробуйте либо переместить в другом месте или удалений нажмите привязки («очистить» предыдущие привязок) перед затруднительным

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

Я хотел бы попробовать второй вариант, чтобы проверить, если это проблема, и если это так, то попробуйте найти, где это было бы подходящее место для размещения этой инструкции (возможно, document.ready)

Answer 3

Я думаю, вы не закрывать модальное окно после каждого представить, вы просто делаете

fadeout(); 

Благодаря этому ранее окна модальных все еще существует, следовательно, форму.