javascript - 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 到 anchor ，但至少要点击 2 次才会添加类。

编辑:

这是整个函数。我有 3 个，名称各不相同。他们都做同样的事情。 .load 基于按下的按钮的页面。我已经添加了建议的更改。现在的问题是我总共需要突出显示 4 或 5 个按钮。我为每个人制作了不同的类(class)。 .actSite、.actUT、.actCadCam。当我现在单击按钮时，添加了第一类。在单击第二个按钮时，第一个按钮的类被删除，并且 2 个类被添加到第二个按钮。

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

决议

我自己找到了一个解决方案。我将下面的代码放在每个函数中。它现在可以正常工作了!

JSFiddle of resolution .

删除 $(document).on('click', 'button', (function(){ 并仅使用 ...

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

这使用按下的任何按钮。它不会在文档中的每个按钮上激活以删除类。

Answer 1

您可以尝试像这样动态绑定(bind)按钮点击:

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

附加处理程序引用

jQuery .on()

jQuery .delegate()