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我基于按下按钮的页面。我添加了建议的更改。现在的问题是我需要突出显示总共4或5个按钮。我为每个人做了不同的课程。 .actSite, .actUT, .actCadCam。当我点击按钮时，现在添加了第一个类。点击第二个按钮，第一个按钮删除了它的类，第二个按钮添加了两个类。

查看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（＆＃39; ADC＆＃39;）背后的内容; （如果您返回false或preventDefault或stopPropagation可能就是您第一次点击时没有获得颜色的原因。）

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

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

Jquery .load导致按钮单击问题

2 个答案: