Jquery .load causing button click issues

Question

I'm trying to use the .load to load a separate .php file into my single page. After the page loads, I want the button to have an added class (change in background-color). If I put the code for the buttons directly in the div tag on the main page. The $('button').click changes the bg color on first click. If I use the .load and then click. The code is executed and loads the data in but the button doesn't get the class I'm trying to add to it. It will work after 2 clicks.

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>

The button will the usertypes.php and follow the href to the anchor, but won't add the class until at least 2 clicks.

Edit:

This is the entire function. I have 3 of these, all named differently. They all do the same thing. .load the a page i based on the button pressed. I have added the suggested changes. Problem now is that I need a total of 4 or 5 buttons to be highlighted. I have made different classes for each. .actSite, .actUT, .actCadCam . As I click the button now the first class is added. on teh second button click, the first button has its class removed and 2 classes are added to the second button.

View JSFiddle of new problem . Those buttons should all end up highlighted in the fiddle.

RESOLUTION

I found a resolution by myself. I put the below code inside each function. It works correctly now!

JSFiddle of resolution .

Remove $(document).on('click', 'button', (function(){ and just use ...

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

This uses whatever button is pressed. It doesn't activate on every single button in the document to remove the class.

Answer 1

You can try binding the button click dynamically like this:

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

Attach a handler references

jQuery .on()

jQuery .delegate()

Answer 2

https://jsfiddle.net/gu1q5338/

At least your code works. I don't know what's behind the FillUserTypes('ADC') ; (If you return false or preventDefault or stopPropagation might be that's why you don't get your color at the first click).

Try passing the clicked button as an argument for the callback and then use like:

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