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');
});