Question

i am loading a php page inside a div that takes a posted variable to display the proper content. it works using this:

$(".mainArea").load("page.php", {'folder': 'a'}).fadeIn(); 
//passes vars, but all my jquery event handlers no longer work

the problem is that after i dynamically load this content – i cant get my event handlers to work. so i thought the solution would be this:

$(".mainArea").on("load", "page.php", {'folder': 'a'}).fadeIn(); 
// all event handlers still work - but the variables do not get posted...

any ideas on how i can combine these two or get the later to actually pass variables?

Answer 1

• .load loads data from the server from the specified URL and places the resulting content in the specified element.

• The load event occurs when an element and its sub-elements have been completely loaded. This event is only available on certain types of elements.

Basically, they do two completely different things (but they do have the same function name in jQuery so they are easily confused).

As for your problem of event handlers being un-bound when you load new content in, you need to use event delegation using on:

$("container_selector").on("event", "child-element-selector", function () {...});