0

我正在尝试编写一个插件，它将一些加载动画绑定到图片，然后再从服务器加载它们。它工作正常，除了某些情况。我的意思是改变 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 结构的变化，但我想这不是最佳实践。所以，也许这个问题已经在 J​​Query on/live 事件中解决了。我想知道，它们是如何工作的。他们如何捕捉到新 DOM 元素的出现？

4

1 回答 1

1

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

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

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

更多关于活动委托 -

于 2013-06-22T11:03:28.120 回答