I have a pletely 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 ;)
I have a pletely 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 ;)
Share Improve this question edited Sep 2, 2012 at 14:13 jk. 14.4k4 gold badges44 silver badges58 bronze badges asked Jan 5, 2012 at 6:26 GalwayGalway 2581 gold badge4 silver badges12 bronze badges 1- did you try .bind("click","testfunc"); – Rashmi Kant Shrivastwa Commented Jan 6, 2012 at 5:21
2 Answers
Reset to default 5Only 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.
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
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744339125a4569296.html
评论列表（0条）