jQuery .load導致按鈕單擊問題

Question

我正在嘗試使用.load將單獨的.php文件加載到我的單個頁面中。 頁面加載后，我希望按鈕具有添加的類（更改背景顏色）。 如果我將按鈕的代碼直接放在主頁的div標簽中。 $('button').click會在第一次單擊時更改bg顏色。 如果我使用.load ，然后單擊。 該代碼已執行並加載了數據，但是按鈕沒有獲取我嘗試添加的類。 單擊2次后即可使用。

jQuery的

//loads the .php file into the main window
$('#UTlist').load('content/usertypes.php #other');

//adds the class to the button that was clicked.
//removes class from other buttons so only one has a darker background
$('button').click(function(){
    $('button').removeClass('actSite')
        $(this).addClass('actSite');
});

CSS：

.actSite {
    background-color: #444;
}

HTML：

<button id="ADC" href="#usertype" class="button scrolly" onClick="FillUserTypes('ADC');" >ADC</button>

該按鈕將顯示usertypes.php並跟隨href到達錨點，但是直到至少單擊2次才會添加該類。

編輯：

這是整個功能。 我有3個，所有的名字都不同。 他們都做同樣的事情。 根據所按的按鈕.load頁面i。 我添加了建議的更改。 現在的問題是，我總共需要突出顯示4個或5個按鈕。 我為每個人設置了不同的課程。 .actSite, .actUT, .actCadCam 。 現在，當我單擊按鈕時，將添加第一堂課。 單擊第二個按鈕時，第一個按鈕的類將被刪除，第二個按鈕將添加2個類。

查看新問題的JSFiddle 。 這些按鈕最終都應該在小提琴中突出顯示。

解析度

我自己找到了解決方案。 我將下面的代碼放入每個函數中。 現在可以正常工作了！

JSF中分辨率 。

刪除$(document).on('click', 'button', (function(){並僅使用...

$('button').removeClass('actSite');
$(document.activeElement).addClass('actSite');

這將使用任何按下的按鈕。 它不會在文檔中的每個按鈕上激活以刪除類。

Answer 1

您可以嘗試像這樣動態綁定按鈕單擊：

$(document).on('click', 'button', (function(){
    $('button').removeClass('actSite');
    $(this).addClass('actSite');
});

附加處理程序引用

jQuery .on（）

jQuery .delegate（）

Answer 2

https://jsfiddle.net/gu1q5338/

至少您的代碼有效。 我不知道FillUserTypes（'ADC'）后面是什么； （如果返回false或preventDefault或stopPropagation可能就是這個原因，那么您在第一次單擊時就不會獲得顏色）。

嘗試將clicked按鈕作為回調的參數傳遞，然后像這樣使用：

$('button').click(function(evt){
    $('button').removeClass('actSite');
        $(evt.target).addClass('actSite');
});