Running JQuery scripts on AJAX loaded content

Question

I am using .load() to pull static HTML files onto my main HTML page. The scripts and selectors that I have written exist within:

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

But they don't work on the AJAX loaded content. I have read that this is because the selectors that I am using are not available.

Is there a better way to do this? Adding the script to the window.load function doesn't work either:

$(window).load(function() {});

Just to confirm, your $(document).ready functions are not executing within the .html you are loading into your master page? or the $(document).ready is not locating the elements you are loading via AJAX? — WiseGuyEh, Nov 19 '10 at 15:16
The latter. There is no $(document).ready in the loaded .html file. Should there be? — mmcglynn, Nov 19 '10 at 16:07

score 67 · Accepted Answer · answered Nov 19 '10 at 15:53

67

$(document).ajaxComplete(function(){
    // fire when any Ajax requests complete
})

answered Nov 19 '10 at 15:53

Jman

1

But that will fire after every AJAX call... which could affect performance, right? Is there a way to manually trigger the jquery? – Bryce Nov 03 '13 at 02:00

Adam Kiss · Answer 2 · 2010-11-20T15:27:08.160

3

There are more than one option:

you can add initialization scripts [ $(this).click... ] into callback function of $.load()
you can use $.live(), which creates handlers even for dynamically loaded/created objects.

More here:
callback: http://api.jquery.com/load/ (notice the "complete()" function)
bind: http://api.jquery.com/live/

Edit: My mistake, it was live(), not bind(), thank you guys

edited Nov 20 '10 at 15:27

answered Nov 19 '10 at 15:18

Adam Kiss

I thought it was `$.live()` for dynamically created objects. http://api.jquery.com/live/ – Stephen Watkins Nov 19 '10 at 15:21
I think you mean the `live` function, which is the equivalent of bind, but works for dynamically created elements. – Tesserex Nov 19 '10 at 15:21

score 1 · Answer 3 · answered Nov 19 '10 at 15:23

1

You can bind events to dynamically loaded content via jQuery's $.live().

Attach a handler to the event for all elements which match the current selector, now and in the future.

answered Nov 19 '10 at 15:23

Stephen Watkins

score 0 · Answer 4 · answered Nov 19 '10 at 16:18

0

jQuery load takes an optional callback function argument which you could use to do any setup you need AFTER your ajax-ed content is loaded

answered Nov 19 '10 at 16:18

Scott Evernden

4 Answers4