Question

I just want to clear where should the javascript for the ajax pages should be put in. For example in my page as soon as the page loads i am making an ajax request and retrievn 20 records each consisting of around 10 divs with some buttons and actions of their own.

Now for the ajax and client side js actions for the newly loaded elements the js has to be put inside the callback in the parent function for them to work properly but this is getting messy as i have around 15 actions for the newly loaded controls.

It is quiet easy to put all the code along with the returned ajax page.

THat is if this is what i return from the initial request

 <div id="something">
 <input type="button" id="btn1">
 <input type="button" id="btn2">
 <input type="button" id="btn3">
 </div>

If i embed the respective js jquery code for these elements along with the returned result its working fine.

 $("#btn1").click(blah)
 $("#btn2").click(blah)
 $("#btn3").click(blah)

Question is , is this ok to do it this way.

Answer 1

Use the $.live() method to add event logic to items added later in the pages life-cycle.

$(":button").live("click", function(){
  // This works on all buttons loaded asynchronously too
  alert( "You clicked button #" + $(this).index() );
});

Online Demo: http://jsbin.com/obapej/edit