單擊事件處理程序在課程變更後不工作

如果用戶單擊了其中一個ul，則顏色和類應該更改。我用這段代碼解決了這個問題，但是我發現事件處理程序在更改類後不再工作。單擊事件處理程序在課程變更後不工作

ul s應該在每次點擊時改變顏色。

$("ul.AAA").click(function() { 
 
    $(this).css("background-color", "yellow"); 
 
    $(this).removeClass("AAA"); 
 
    $(this).addClass("BBB"); 
 
}) 
 

 
$("ul.BBB").click(function() { 
 
    $(this).css("background-color", "blue"); 
 
    $(this).removeClass("BBB"); 
 
    $(this).addClass("AAA"); 
 
})

div#start { 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
} 
 
ul.AAA { 
 
    background-color: red; 
 
} 
 
ul.BBB { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="AAA"> 
 
    <li> 
 
    <p>LIST 1</p> 
 
    </li> 
 
    <li> 
 
    <div> 
 
     <div>A</div> 
 
     <div>B</div> 
 
     <div>C</div> 
 
    </div> 
 
    </li> 
 
</ul> 
 
<ul class="BBB"> 
 
    <li> 
 
    <p>LIST 2</p> 
 
    </li> 
 
    <li> 
 
    <div> 
 
     <div>A</div> 
 
     <div>B</div> 
 
     <div>C</div> 
 
    </div> 
 
    </li> 
 
</ul>

我也on試了一下：

$("ul.AAA").on("click", function() { 
 
    $(this).css("background-color", "yellow"); 
 
    $(this).removeClass("AAA"); 
 
    $(this).addClass("BBB"); 
 
}) 
 

 
$("ul.BBB").on("click", function() { 
 
    $(this).css("background-color", "blue"); 
 
    $(this).removeClass("BBB"); 
 
    $(this).addClass("AAA"); 
 
})

div#start { 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
} 
 
ul.AAA { 
 
    background-color: red; 
 
} 
 
ul.BBB { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="AAA"> 
 
    <li> 
 
    <p>LIST 1</p> 
 
    </li> 
 
    <li> 
 
    <div> 
 
     <div>A</div> 
 
     <div>B</div> 
 
     <div>C</div> 
 
    </div> 
 
    </li> 
 
</ul> 
 
<ul class="BBB"> 
 
    <li> 
 
    <p>LIST 2</p> 
 
    </li> 
 
    <li> 
 
    <div> 
 
     <div>A</div> 
 
     <div>B</div> 
 
     <div>C</div> 
 
    </div> 
 
    </li> 
 
</ul>

我怎樣才能解決這個問題？

來源

2016-07-05 Black

你需要委派事件 – guradio

當您要動態更改類時，您需要使用on()，但是您需要使用它的委託版本。試試這個：

$(document).on("click", "ul.AAA", function() { 
 
    $(this).css("background-color", "yellow"); 
 
    $(this).toggleClass("AAA BBB"); 
 
}) 
 

 
$(document).on("click", "ul.BBB", function() { 
 
    $(this).css("background-color", "blue"); 
 
    $(this).toggleClass("AAA BBB"); 
 
})

div#start { 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
} 
 
ul.AAA { 
 
    background-color: red; 
 
} 
 
ul.BBB { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="AAA"> 
 
    <li> 
 
    <p>LIST 1</p> 
 
    </li> 
 
    <li> 
 
    <div> 
 
     <div>A</div> 
 
     <div>B</div> 
 
     <div>C</div> 
 
    </div> 
 
    </li> 
 
</ul> 
 
<ul class="BBB"> 
 
    <li> 
 
    <p>LIST 2</p> 
 
    </li> 
 
    <li> 
 
    <div> 
 
     <div>A</div> 
 
     <div>B</div> 
 
     <div>C</div> 
 
    </div> 
 
    </li> 
 
</ul>

還要注意使用toggleClass()超過addClass()然後removeClass()

來源

2016-07-05 08:03:33

閱讀[這]（HTTPS：//learn.jquery。com/events/event-delegation /）文章進一步瞭解。我btw完全同意這個答案。（問題：目前處理事件的方式是，jQuery贏得了將來添加的元素的識別，刪除和添加類將導致事件不會發生（因爲最初的「按鈕」不會再激活）） –

@AmareshChinnakotla我已經拒絕了你的編輯兩次，如果你想留下評論，請隨意，但如果你沒有編輯我的答案，我更喜歡它。 –

$(document).on("click","ul.AAA",function() {//delegate the event to document 
 
    //$(this).css("background-color", "yellow"); 
 
    $(this).removeClass("AAA"); 
 
    $(this).addClass("BBB"); 
 
    } 
 
) 
 

 
$(document).on("click","ul.BBB",function() {//delegate the event to document 
 
    //$(this).css("background-color", "blue"); 
 
    $(this).removeClass("BBB"); 
 
    $(this).addClass("AAA"); 
 
    } 
 
)

div#start { 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
} 
 
ul.AAA { 
 
    background-color: red; 
 
} 
 
ul.BBB { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="AAA"> 
 
    <li> 
 
    <p>LIST 1</p> 
 
    </li> 
 
    <li> 
 
    <div> 
 
     <div>A</div> 
 
     <div>B</div> 
 
     <div>C</div> 
 
    </div> 
 
    </li> 
 
</ul> 
 
<ul class="BBB"> 
 
    <li> 
 
    <p>LIST 2</p> 
 
    </li> 
 
    <li> 
 
    <div> 
 
     <div>A</div> 
 
     <div>B</div> 
 
     <div>C</div> 
 
    </div> 
 
    </li> 
 
</ul>

來源

2016-07-05 08:03:57 guradio

目前使用的是所謂的「直接「綁定只會附加到元素在您的代碼進行事件綁定調用時存在於頁面上。

您需要使用Event Delegation使用.on()委託事件的方法，當操縱選擇器（如刪除和添加類）。

常規語法

$(document).on('event','selector',callback_function)

例

$(document).on("click", "ul.AAA", function() { 
    //Rest of your code 
});

在地方的document你應該用最接近的靜態容器。

委派事件的優點是它們可以處理後來添加到文檔中的後代元素的事件。通過選擇在委託事件處理程序附加時保證存在的元素，我們可以使用委託事件將click事件綁定到動態創建的元素，並避免頻繁附加和移除事件處理程序。

一個良好的閱讀Direct and delegated events

來源

2016-07-05 08:04:29 Satpal

單擊事件處理程序在課程變更後不工作

回答

相關問題