的jQuery的（）點擊事件處理程序與動態數據崩潰

這裏是我想要實現一個簡單的例子：http://jsfiddle.net/easLc/的jQuery的（）點擊事件處理程序與動態數據崩潰

HTML

<div class="bar"> 
    <div class="apple"> apple</div> 
    <div class="banana"> banana</div> 
    <div class="citrus"> citrus </div> 
</div>

jQuery的

function showAlert(event) { 
    inventory = event.data.inventory; 
    alert(inventory);   
} 

fruits = ["apple", "banana", "citrus"]; 
inventory = [13, 45, 99]; 

for (i in fruits) {   
    $(".bar ."+fruits[i]).on("click", {inventory:inventory[i]},showAlert); 
}

庫存我傳遞給處理程序的數據是動態的，不像示例那樣是靜態的。我從異步調用中獲取庫存數據。在每次清單數據更新後，我想將這些數據傳遞給處理程序，而不是讓處理程序再次獲取該信息。

我注意到的是一些點擊，處理程序（我認爲）正在崩潰我的瀏覽器。我是否無意中創造了太多處理程序？我如何看到創建了哪些處理程序？或者點擊事件發生了什麼？我嘗試添加一些console.log到處理程序，但我沒有在控制檯中看到它們。

謝謝！

來源

2012-10-09 PLui

我們可以有真實的代碼嗎？請用ajax調用和成功函數？我的猜測是，您在每次調用時都添加一個.on，但無法看到您顯示的內容 – Salketer

要在Chrome中調試代碼，請按F12打開開發人員工具 - 您可能會在控制檯中列出一些錯誤底部。在Firefox中，安裝Firebug（https://getfirebug.com/）並使用它來檢查錯誤。在IE中，按F12並轉到控制檯選項卡查看錯誤 –

@Salketer，我的代碼非常長，仍然需要清理。在這一點上閱讀可能太令人困惑了。你可以在每次電話會議上詳細說明你的意思嗎？我認爲這就是我所做的，但我不確定如何發現它。 – PLui

嘗試

$(".bar ."+fruits[i]).off('click',showAlert).on("click", {inventory:inventory[i]},showAlert);

這將刪除先前綁定的事件並重新綁定它......但很難確定它是否是問題的真正根源。你可以在showAlert中添加一個console.log（'text'）來查看它是否被多次調用。

來源

2012-10-09 15:09:24 Salketer

我認爲那樣做了！感謝Salketer！ :) – PLui

我建議使用命名空間作爲點擊事件，如果你正在使用這種方法，以防萬一你綁定了其他點擊事件而你不想讓它們解除綁定。 –

@ExplosionPills，我不太熟悉命名空間和事件。我會深入挖掘並瞭解這意味着什麼。感謝您的提升！ – PLui

您可以防止多個綁定通過添加某種數據，一旦它被綁定的元素（一個清潔的方式將是一個類，但元數據可以通過標準的優先）：

$(".bar ." + fruits[i]).not(".bound").on('click', {...}).addClass('bound');

來源

2012-10-09 14:47:23

這聽起來像是一個很好的解決方案。但是當庫存更新時會發生什麼？這是否會傳遞最初的數據？我剛纔試了一下，注意到它多次調用處理程序，而不是一次。然後我的瀏覽器崩潰了。 – PLui

的jQuery的（）點擊事件處理程序與動態數據崩潰

回答

相關問題