JQuery中的实况事件实际上是如何工作的？

我想写一个插件，它将从服务器加载之前将一些加载动画绑定到图片。它工作正常，除了一些情况。我的意思是改变DOM结构。我的插件的逻辑是：JQuery中的实况事件实际上是如何工作的？

(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突变事件可以帮助我，但据我了解，它们不受所有浏览器的支持。此外，我可以使用setinterval捕捉DOM结构的变化，但我想这不是最佳实践。所以，也许这个问题已经在JQuery on/live事件中解决了。我想知道他们是如何工作的。他们如何捕捉新DOM元素的外观？

来源

2013-06-22 Aleksei Akireikin

问题不在于做的IMG插件代码*本身*而是如何/何时被激发（或不调用）有问题的节点。您需要确保在页面加载时调用现有img节点上的插件，然后每当插入新的img节点时。 –

@甜菜根 - 甜菜根，但我怎么能确定新的img节点被插入？ –

您是否负责执行插入的代码？如果是这样，那么调用该代码中的插件。 –

当使用事件代理与on，事件总是连接到其不会被动态

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

加载例如#Container在上面的例子中的静态元件是其存在于DOM和容器您正在动态添加#dynamicallyAddedChildOfContainer，现在，当您单击动态添加的元素时，事件气泡直至容器，并且这是事件触发的位置。

更多关于事件委托 -

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

来源

2013-06-22 11:03:28

谢谢，pXL。有用的职位。 –

JQuery中的实况事件实际上是如何工作的？

回答

相关问题