jQuery單擊：not（）選定元素僅觸發一次

Question

http://jsfiddle.net/qLhp7mns/1/

嗨，您好！ 這個簡單的切換操作有點問題-在一個.click事件發生后，我無法將其切換回其原始狀態！ 我不知道我在做什么錯（或者根本就錯）。 瀏覽器內的Javascript控制台未顯示任何錯誤，因此我更加困惑！

我一直在瀏覽有相同問題的人的許多問題，但是添加“ on”事件似乎無濟於事（除非我也做錯了！）。 希望這不僅是更多的相同：c預先感謝！ <3

這是導致問題的JQuery行：

$('.tog:not(.selected)').click(function(){
$('.tog.selected').removeClass('selected');$(this).addClass('selected');
});

Answer 1

試試這個代替（ 小提琴 ）

$(document).on('click', '.tog:not(.selected)', function() {
   $('.tog.selected').toggleClass('selected');
   $(this).toggleClass('selected');
});

Answer 2

使用toggleClass() ，可以簡化為

 $(document).on('click', '.tog:not(.selected)', function () {
    $('.tog').toggleClass('selected');
 });

這將為兩個div selected的類與類tog切換。 小提琴

正如您提到的那樣，您嘗試使用on()沒有得到想要的結果，或者可能使用了錯誤的結果，這是一種解釋-諸如click()類的事件僅適用於頁面加載時實際位於DOM中的元素。 要將事件處理程序應用於后來添加的元素或例如添加類的結果，可以使用事件委托 -靜態父元素，例如$(document) -將事件委托給動態添加/調整的元素。

供參考： https : //api.jquery.com/on/#on-events-selector-data-handler的 “直接和委托事件”部分：

“事件處理程序僅綁定到當前選擇的元素；在代碼調用.on（）時，它們必須存在於頁面上。”