jQuery - .load page via AJAX, callback definition on loaded page?

Question

Hi, I'm using $('#container').load method to handle loading all the subpages of my site. Now the deal is, some sub-pages require extra behavior (like form validation etc.)

I'd love them to be self-contained, so - each sub-page has own JS code that handles all the subpage-specific tasks. This however requires some of them to handle "loaded" callback to access the just-loaded DOM nodes.

Any tips on how to achieve it? I tried putting Copy code

<form id="my-form"> .. </form>
<script>
$('#my-form').ready(function() {
    //..
});</script>

but it doesn't seem to be triggered when loaded via AJAX.

Answer 1

Since your form/page is loaded, you need to use either of live or delegate method, for example here is how you could validate your form:

$('#my-form').live('submit', function(){
  // your validation code....
});

The live or delegate methods work on any element present now or in future.

More Info:

• http://api.jquery.com/live/
• http://api.jquery.com/delegate/

Answer 2

Finally I've figured out the problem. It was all about content filtering (second parameter of .load method). Now, instead of filtering on JS side, I'm doing it server-side.