JavaScript/JQuery雙重執行

我正在使用下面的代碼作爲調試 - 我只是想觀察單選按鈕上的點擊並適當地設計它們。JavaScript/JQuery雙重執行

$("#item-select-form label.radio").click(function() { 
    var child_input, input_id; 
    console.log("clicked!"); 
    child_input = $(this).children("input"); 
    input_id = child_input.attr("id"); 
    return console.log(input_id); 
});

該代碼似乎工作正常。我得到了「點擊！」並且我看到了孩子輸入的正確ID。然而，這段代碼正在執行兩次，我無法弄清楚爲什麼（如果這有什麼區別，我正在使用Rails）。

我該如何追蹤它的來源和原因？

來源

2012-12-22 Brandon

添加console.log（）或函數前面的斷點，並檢查處理程序是否連接了兩次。 –

是否多次添加'.click（）'函數？這會導致它執行多次。檢查源代碼的其他部分，看看你是否有重複的代碼 – kennypu

如何使用console.log來確定處理程序正在連接的位置？我現在所能做的就是確定它實際上是通過在javascript內拋出console.log（「hi there！」）來調用兩次。 – Brandon

這幾乎肯定是因爲事件被綁定多次。 jQuery執行所有綁定的事件處理程序。

爲確保它只執行一次，您應該只綁定一次。或你應該在綁定之前再綁定任何綁定的處理程序。對於前：

// unbind the previously bound handler 
$("#item-select-form label.radio").unbind('click'); 

// bind your click 
$("#item-select-form label.radio").click(function() { 
... 
});

來源

2012-12-22 00:49:31 techfoobar

如果你在一個Ajax響應將被多次觸發結合這種情況下，你應該再結合它（之前解除綁定的情況下，如果沒有綁定也不會導致前錯誤）也有一個在你的代碼的改進，您可以使用此：

$("#item-select-form").find("label.radio").click...

或

$("#item-select-form").click(function(e){ 
    var elemPressed = $(e.target); 
    if(elemPressed).is("label.radio")){ 
     //do your stuff 
    } 
});

這兩種技術的速度比原來的選擇（使用sizzle）和第二個（我最喜歡的）讓我們爲整個頁面創建一個事件，而不是爲DOM創建幾個事件（從而減慢性能）

來源

2012-12-22 01:02:26

感謝提示和代碼改進！我會看看。我只是困惑，因爲我沒有使用任何AJAX，我認爲這是唯一的JavaScript引用此頁面....不應該執行兩次！ – Brandon

我確實讓你的代碼有效（希望我的JQuery會執行得更快！），但它仍然執行兩次。我怎樣才能使用控制檯找出這些方法被調用的地方？ – Brandon

好吧，這很奇怪，你可以給一些代碼或至少一些html？我的猜測是，你從ajax響應創建元素並將事件綁定到這些元素，我給你的代碼的美妙之處在於你只需要將事件綁定到元素上＃item-select-form once在一個$（window）.load）上，你就完成了，即使在頁面加載時沒有label.radio存在，它也可以工作。 –

JavaScript/JQuery雙重執行

回答

相關問題