.load vs .on ("load")

Question

I am loading a php page inside a div that accepts a published variable to display the correct 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 cannot get the event handlers to work. so I thought the solution would be like 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 later ones to actually pass variables?

Answer 1

• .load downloads 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 subelements have been fully loaded. This event is only available for certain types of items.

Basically, they do two completely different things (but they have the same function name in jQuery, so it's easy to confuse them).

As for your problem with event handlers that are not tied when loading new content, you need to use event delegation using on

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