動態選擇

Question

我有一個類似的代碼，在那裏我指定功能的點擊甚至改變風格

$(".style1, .style2", "#section").click(function() { 
    changeStyle($(this)); 
}); 

它可能發生，從STYLE1到藍紫魅力的項目變化，所以項目應該仍然是可點擊的，但這些操作不會生效。似乎項目列表$（「。style1，.style2」，「＃section」）是在加載時創建的，並且當我將階梯更改爲包含新元素時不會更新。

我試圖把粘貼的代碼放到一個功能，並在功能changeStyle結束調用它，但是這增加了另一種觸發因素，所以當我在其他項目單擊與style1或style2，動作觸發2，3 ， 4次。而我只有一次觸發一次。

我該如何解決？

感謝您的幫助。

Answer 1

我不完全理解你的問題，但它聽起來像你正在創建新的元素，並動態地爲它們動態添加事件處理程序。

如果這是您的問題，您只需要使用.delegate()，這將確保事件處理程序在頁面生命週期的後期與現有和動態創建的元素相連。這樣，每次創建元素時都不必一直分配事件處理程序。

$('#section').delegate('.style1,.style2', 'click', function() { 
    changeStyle($(this)); 
}); 

此外，您changeStyle()功能聽起來似乎可以受益於.toggleClass()很多或者類似的jQuery函數。

Answer 2

嘗試改變你的'點擊'使用的生活。因此，

$(".style1, .style2", "#section").live("click", function (e) { 
    changeStyle($(e.target)); 
}); 

Live意味着選擇器測試是在點擊而不是在頁面加載時完成的。你可以在這裏看到文檔：http://api.jquery.com/live/