Jquery .load 导致按钮点击问题

Question

我正在尝试使用.load 将单独的.php 文件加载到我的单个页面中。页面加载后，我希望按钮添加一个类（更改背景颜色）。如果我将按钮的代码直接放在主页上的 div 标签中。 $('button').click 在第一次点击时改变背景颜色。如果我使用.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 个，所有名称都不同。他们都做同样的事情。 @ 987654329@ 基于按下按钮的页面。我已经添加了建议的更改。现在的问题是我总共需要突出显示 4 或 5 个按钮。我为每个人做了不同的课程。 .actSite, .actUT, .actCadCam。当我单击按钮时，现在添加了第一个类。在第二个按钮单击时，第一个按钮的类被删除，第二个按钮添加了 2 个类。

查看JSFiddle of new problem。这些按钮最终都应该在小提琴中突出显示。

分辨率

我自己找到了解决方案。我将以下代码放入每个函数中。现在可以正常使用了！

JSFiddle of resolution。

删除 $(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 可能就是您在第一次点击时没有获得颜色的原因）。

尝试将单击的按钮作为回调的参数传递，然后使用如下：

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