JQuery $(document).ready ajax load

Register the events in the callback of the AJAX function.

If you're using .load() to do load the middle div, place your jQuery code directly in the callback:

$('#middleDiv').load('/fish.php', function () {    $('#someDiv').fadeIn(300); // ? whatever});

If you're using some of the other AJAX functions, place your jQuery code after the line where you add the elements to the DOM in the callback:

jQuery.get('/fish.php', function (response) {    $('#middleDiv').html(response);    $('#someDiv').fadeIn(300); // ? whatever});

If it's events you want to bind, you might look at using .on() (or .delegate() or .live() if you're using the older versions of jQuery, which were around when this question was originally written). You can see a comparison of these various methods here.

These methods allow the binding of events to elements even when they are not yet present in the DOM; which means you can bind the events in your $(document).ready() block, even though the elements aren't registered in the DOM yet.

Craig,

I think you are trying to go about this the hard way.

Firstly: Although you technically could manipulate the response with javascript/jquery before you inject them into the page, it's going to be a hell of a lot easier to do this immediately after they have been added (as per a document ready).

Secondly: I'm not sure how effective that method would be if you were adding something like a datepicker. I'm guessing you can't add a datepicker to an element before the whole thing is in the page (just a guess). Those jQuery UI widgets have a lot going on in the background.

I suggest you follow the advice of the Matt.

If you call $.post, the callback function is the same as your $(document).ready function, it will be called as soon as the response is available so you could do something like this:

$.post(url, data, function(response) {    $("#some_element").append(response);    // Now your element has been injected you can do whatever u like here    // call some function etc.});

This is the best way to go about it. The manipulation will be done as soon as the data has been injected into your page the same as $(document).ready.

If you think there is some lag with what you are doing and you don't want your users to see, then set display to hide and then fade in or show once the manipulation has been done.