Refire ready event after AJAX reload

Question

I\'ve researched other threads and am just confused.

Situation: I\'m supplying a generic jQuery plugin that loads the div the user specifies dynamically via AJAX. E

Answer 1

You shouldn't attempt to reload the entire DOM ready function. Particularly harmful is the n+n nature of events if you did, 2 click events on the same element for example could potentially become 4, then 8 etc. if the DOM ready function is repeatedly re-fired by them.

You can avoid this by taking out the code that you need to run once you're done with your ajax call and presumably the population of the element that you're hoping would benefit from the event you wish to re-initialise.

$(document).ready(function()
{
    initialise();

    //... Resume with DOM ready
});

function initialise()
{
    // create event here that needs re-initialising
}

So when you're done with your ajax call just call initialise() again.

Alternatively look to using .on and using it's bubbling up capabilities, this is how I would handle this kind of problem. It avoids you having to ever think about 're-initialising' any part of the DOM ready functions in your scripts.

Additional from comments

.on allows you to bind events to low level elements on the page that do not change at any time, whilst allowing you to control which of the dynamic elements actually trigger the event within that container.

<div id="container">

    <div id="ajax-content">

        <a href="#" class="created-link">A new link</a>

    </div>

</div>

So we know that the <a> is created by an ajax function after the DOM ready event is fired, therefore any direct events applied to it then would not work.

Instead we would bind the event to a lower level unchanged element and bubble up to the containing dynamic DOM element.

$('#container').on('click', '.created-link', function(event)
{
    event.preventDefault();

    // Your normal onclick code
});

Answer 2

It look likes that link with # as href are not working. Just take care of this. :)

Answer 3

just to share my findings and solution, I had the same problem that after an AJAX reload the $(document).ready function is not called for this problem i have used combinations of this two answers, and in the end found a very simple solution

• from this thread the answer from David Barker
• from another thread the answer from Nick Young

My solution looks like this

<script type="text/javascript">
function initialise(){
    $('.clickableItem').click(function(){
        /* do code here */
        return false;
    });
};
$(document).ready(function(){
    initialise();
});
$(document).ajaxComplete(function () {
    initialise();
});
</script>

hope this helps someone