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

Answer 1

当您使用on的事件委托时，事件始终附加到不会动态加载的静态元素

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

例如上面示例中的#Container是DOM中存在的容器，并且您正在动态添加#dynamicallyAddedChildOfContainer，现在当您单击动态添加的元素时，事件气泡直到容器和那个是触发事件的地方。

有关事件委托的更多信息 -

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

JQuery中的on / live事件实际上是如何工作的？

1 个答案: