爲什麼在點擊時應該執行一次函數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 
});