All geek questions in one place

JQuery.on function unlike load event

I have a fully managed website, so lately I had to research delegation methods. I found out that .live and .delegate are deprecated, and the new function is .on.

If I dynamically load a web page into a section on the current page (AJAX), for example:

<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>

Then I can click on the words “THIS MAP” and it really shows a warning. The problem I ran into is not to do:

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

I need something more line by line:

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

This does not work explicitly, so I'm wondering if something like this can. The whole reason I even ask about this is because on some pages, instead of just “THIS MAKA” in the map unit, I have a google map or swf object or something else. Any help would be appreciated.

If you just want to answer how to load a Google map into a division that does not exist yet, this will also be useful;)

+4
source share
2 answers

Only some events trigger parent chain bubbles and can be used for parent objects with .on() or .live() or .delegate() . .load() not one of those bubbling events.

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

The doc page for .on() quotes here:

In all browsers, the download event does not bubble.

In your specific example, you can associate the event directly with the object as follows:

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

or

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

When you snap directly to an object like this, no bubbles are needed and it will work with the load event. The #map object must exist at the time the event handler is bound, because this method of using .on() or .load() cannot work with objects that will be created in the future. The event handler must be bound to the object after creating the object.

+5
source

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

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

link

+1
source

Source: https://habr.com/ru/post/1389403/

More articles:


All Articles