Как работает on/live событие в JQuery?

Question

Я пытаюсь написать плагин, который привяжет некоторую анимацию загрузки к изображениям до их загрузки с сервера. Он отлично работает, за исключением некоторых случаев. Я имею в виду изменение структуры DOM. Логика моего плагина:

(function(window){ 

'use strict'; 

var $ = window.jQuery; 
var console = window.console; 
var hasConsole = typeof console !== 'undefined'; 

var methods = { 
    // plugin initialization 
    init : function(options) { 
     return this.each(function(){ 
      methods._applyImagepreloader.apply(this, options); 
     }); 
    }, 
    // working with each object 
    _applyImagepreloader: function() { 
     // if has class imagepreloader, do nothing 
     if ($(this).hasClass('imagepreloader')) 
      return; 
     // if the image has determined size 
     var width = $(this).width(); 
     var height = $(this).height(); 
     $(this) 
      .clone() 
      .attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') 
      .attr('width', width) 
      .attr('height', height) 
      .addClass('imagepreloader') 
      .insertAfter(this); 
     $(this).hide(); 
     $(this).load(function(){ 
      $(this).next('.imagepreloader').remove(); 
      $(this).fadeIn(); 
     }); 
    } 
}; 

$.fn.imagepreloader = function(options) { 
    return methods.init.apply(this, options); 
}; 

})(window); 

Теперь, когда страница обновляется с помощью AJAX и новые теги изображений появляются, мой плагин не работает. Я провел расследование и узнал, что события мутации DOM могут мне помочь, но, как я понял, они не поддерживаются всеми браузерами. Более того, я могу поймать изменение структуры DOM, используя setinterval, но я думаю, что это не лучшая практика. Итак, возможно, проблема уже решена в JQuery on/live events. Интересно, как они работают. Как они могут поймать появление новых элементов DOM?

Answer 1

При использовании делегирования событий с on, событие всегда прикреплен к статическому элементу, который не собирается быть загружен динамически

$("#Container").on('click','#dynamicallyAddedChildOfContainer',function(){...}); 

Например #Container в приведенном выше примере является контейнером, который присутствует в DOM и вы добавляете #dynamicallyAddedChildOfContainer динамически. Теперь, когда вы нажимаете на динамически добавленный элемент, пузырь событий до контейнера и это то, где происходит событие.

Подробнее о делегировании событий -

• http://learn.jquery.com/events/event-delegation/