javascript - Jquery .load causing button click issues -

i'm trying use .load load separate .php file single page. after page loads, want button have added class (change in background-color). if put code buttons directly in div tag on main page. $('button').click changes bg color on first click. if use .load , click. code executed , loads data in button doesn't class i'm trying add it. work after 2 clicks.

jquery

//loads .php file main window $('#utlist').load('content/usertypes.php #other');  //adds class button clicked. //removes class other buttons 1 has 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 usertypes.php , follow href anchor, won't add class until @ least 2 clicks.

edit:

this entire function. have 3 of these, named differently. same thing. .load page based on button pressed. have added suggested changes. problem need total of 4 or 5 buttons highlighted. have made different classes each. .actsite, .actut, .actcadcam. click button first class added. on teh second button click, first button has class removed , 2 classes added second button.

view jsfiddle of new problem. buttons should end highlighted in fiddle.

resolution

i found resolution myself. put below code inside each function. works correctly now!

jsfiddle of resolution.

remove $(document).on('click', 'button', (function(){ , use ...

$('button').removeclass('actsite'); $(document.activeelement).addclass('actsite'); 

this uses whatever button pressed. doesn't activate on every single button in document remove class.

you can try binding button click dynamically this:

$(document).on('click', 'button', (function(){     $('button').removeclass('actsite');     $(this).addclass('actsite'); }); 

attach handler references

jquery .on()

jquery .delegate()