为什么在点击时应该执行一次函数1 + n次？

Question

我添加事件监听这样的：

var runSingleTest = document.getElementById('runSingleTest'); 
runSingleTest.addEventListener('click', sendSingeleTestCase); 

当用户单击我的表格下面的代码按钮时，执行1 + n次，其中n是之前点击该按钮的数量。

function sendSingeleTestCase(){ 
    var frm = $('#scriptCodeForm'); 
    var btn = $('#runSingleTest'); 
    saveScriptToLocalStorage(); 
    frm.submit(function (ev){ 
     $.ajax({ 
      type: frm.attr('method'), 
      url: btn.attr('formaction'), 
      data: frm.serialize(), 
      success: function (data) { 
       console.log("Test would run once."); 
      } 
     }); 
     ev.preventDefault(); 
    });  
} 

它没有像预期的那样表现（当它只应执行一次时执行很多次）。

你能帮我理解为什么它不能按照假设工作吗？

谢谢！

Answer 1

您正在连接点击处理程序中的提交处理程序。将它们分开，以便只注册一次提交处理程序。

例如是这样的：

function sendSingeleTestCase(){ 
    saveScriptToLocalStorage(); 
} 

var frm = $('#scriptCodeForm'); 
var btn = $('#runSingleTest'); 
frm.submit(function (ev){ 
    $.ajax({ 
     type: frm.attr('method'), 
     url: btn.attr('formaction'), 
     data: frm.serialize(), 
     success: function (data) { 
      console.log("Test would run once."); 
     } 
    }); 
    ev.preventDefault(); 
});  

另外请注意：当你正在使用jQuery，请您点击处理程序转换为眼前这个：

$('#runSingleTest').click(sendSingeleTestCase); 

或放置anoymous函数内部的处理代码：

$('#runSingleTest').click(function(){ 
    saveScriptToLocalStorage(); 
    // Do other stuff 
});