Friday 15 January 2010

javascript - How on/live event in JQuery actually works? -


I'm trying to write a plugin, which animation tied to a load in the first pictures of the load on the server Will give It works fine except for a few cases. I mean changing the DOM structure. The logic of my plugin:

  (function (window) { "use strict; var $ = window.jQuery; var console = window.console; var a = Console Type Console! = = 'undefined'; var methods = {// plugin initialization init: function (options) {Thiskeach return (function () {methods._applyImagepreloader.apply (this option);});} // with each object work _applyImagepreloader: function () {// if class imagepreloader, some does not, if ($ (this) .hasClass ( 'imagepreloader')) return; // if the image is determined size var width = $ (this ) .width (); height = $ (this) .he ight (); $ (this) .clone () .attr ( 'src', 'data: image / gif; base 64, R0lGODlhAQABAIAAAAAAAP /// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') .attr ( 'width (width) .attr (' height ', height) remove .addClass (' imagepreloader ') .inertAfter (this); $ (this) .hide (); $ (this) .load (function () {$ (this) next ('. imagepreloader ') (); $ (This) .fadeIn ();});}}; $ .fn.imagepreloader = function (option) {methods.init.apply Return (this, option); };}) (Y. Ndow);   

Now, when the page is being updated by AJAX and new image tags appear, my plugin does not work. I did a check and learned that incidents of DOM mutation can help me, but as I have understood, they are not supported by all browsers. Apart from this, I can catch the change of DOM structure by using the Settrol, but I think that this is not the best practice, so I wonder if this issue has already been resolved in JQuery / Live event, How can they get the presence of new DOM elements?

When you use Event delegation on , the event is always a constant Element that is not going to be loaded dynamically

  $ ("# container"). ('Click', '# dynamically added balloon of container' function () {...});   

For example #container in the above example is a container that is present in the DOM and you are dynamically adding #dynamicallyAddedChildOfContainer Now, when you click on the dynamically added element, the event bubble is above the container and it happens when the event starts.

More on event delegation



No comments:

Post a Comment