CODEWITHSUNDEEP
javascriptajaxdelegatesjquery
Galway
Galway

Reputation: 258

jQuery's .on function doesn't seem to like 'load' event

I have a completely ajax driven website, so lately I've had to research delegation techniques. I've learned that .live and .delegate have been deprecated and the new function to use is .on .

If I'm dynamically loading a webpage into a division on the current page (AJAX) like so:

<html>
<head>
<script src="jquery.js">
</script>
<script>
function ajaxTest()
{
    $('#content').load('test.php');
}
</script>
<script type="text/javascript">
$(function(){
    $(document).on("click", "#map", function(){
        alert("it has been loaded");
    });
});
</script>
</head>
<body>
    <div id="content">
        <button onClick="ajaxTest()" value="Click Me">
            This is to be clicked
        </button>
    </div>
</body>
</html>

where test.php looks like

<html>
  <head>
  </head>
  <body>
    <div id="map">THIS IS THE MAP</div>
  </body>
</html>

I can then click on the words "THIS IS THE MAP" and it does indeed show the alert. The problem I've been having is instead of doing:

$(document).on("**click**", "#map", function(){

I need something more along the lines of:

$(document).on("**load**", "#map", function(){

It doesn't work obviously, so I'm wondering if something similar might. The whole reason I'm even inquiring about this is because in some pages, instead of having just "THIS IS THE MAP" in the map division, I have a google map or an swf object or something. Any help would be appreciated.

If you wanted to just answer how to load a google map into a division that doesn't exist yet, that would be helpful too ;)

Upvotes: 4

Views: 5473

Answers (2)

jfriend00
jfriend00

Reputation: 707876

Only some events bubble up the parent chain and can be used on parent objects with .on() or .live() or .delegate(). .load() is not one of those events that bubbles.

This is a partial list of events that bubble from the jQuery doc: click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.

From the doc page for .on(), here's a quote:

In all browsers, the load event does not bubble.

In your particular example, you can bind the event directly to the object like this:

$("#map").on("load", function(){});

or

$("#map").load(function(){});

When you bind directly to the object like this, no bubbling is needed and it will work with the load event. The object #map will need to exist at the time you bind the event handler as this method of using .on() or .load() can't work with objects that will be created in the future. The event handler must be attached to the object after the object is created.

Upvotes: 5

dku.rajkumar
dku.rajkumar

Reputation: 18578

if you want to do something when the response is loaded you can make use callback function in load instead of doing it in two separate script and event binding, something like

$('#content').load('test.php', function(){
alert("map is loaoded.")
});

reference

Upvotes: 1

Related Questions