Question

在我的插件中，我需要将div中所有侧边栏的子项包装起来让它们溢出但是如果这些元素是动态加载的，那么该函数不起作用，我不知道如何使其工作。

代码是：

<div class="sidebar">
</div>

var $sidebar = $( '.sidebar' );

$sidebar.load( 'external-page.ext' );

$sidebar.MyPlugin();

$.fn.MyPlugin = function() {
    this.wrapInner( '<div />' );
});

如果没有动态加载这些元素，则没有问题。

首先代码是：

$sidebar.wrapInner( '<div/>' );

如果没有动态加载elemens，这只能正常工作，所以我尝试了这种方式：

var children = $sidebar.children();

$( document ).on( 'load', children, function() {
    $( this ).wrapAll( '<div />' );
});

但是，它当然不起作用。你能帮我吗？

我认为this rule这次也会奏效，但事实并非如此。我错了什么？

您可以找到整个代码here。还有一个演示here

更多详情

我想从内部处理这个问题，而不是从外部处理！我不知道用户是否会以动态方式加载内容。这才是重点。那么有一种方法可以在插件中处理这个问题，而不是在外面吗？

Answer 1

来自手册

http://api.jquery.com/load/

回调功能

如果＆＃34;完成＆＃34;提供回调，之后执行   已经执行了后处理和HTML插入。回调是   为jQuery集合中的每个元素触发一次，然后设置   依次为每个DOM元素。

尝试以下代码，看看是否有效：

$sidebar.load( 'external-page.ext', function() { $sidebar.MyPlugin(); } );

感谢。

Answer 2

$.load()进行 ajax调用以加载数据，

因此，在this.wrapInner( '<div />' )内加载任何数据之前，您的div.sidebar方法可能已被调用。使用完整回调成功加载所有数据后，确保调用this.wrapInner( '<div />' )。

$.load()触发每个div的回调，从回调中调用你的插件

$sidebar.load('http://fiddle.jshell.net/vikrant47/ncagab2y/1/show/', function () {
            $(this).MyPlugin();
        }    
    });

DEMO

或

如果你只使用$.load()加载多个元素，那么你可以使用一个更强大的jQuery ajax方法（即get（）或post（）或ajax（））。

$.get('http://fiddle.jshell.net/vikrant47/ncagab2y/1/show/', {}, function(data) { $sidebar.html(data).MyPlugin(); });

DEMO using $.get() Method

<强>更新 -

回答评论 -

您不必担心天气用户会像这样调用您的插件$sidebar.load(...).MyPlugin()。用户必须充分了解如何处理asynchronous方法。

在 div.slider 中包含一些数据之前，您无法使插件正常工作但是，您可以在插件中添加ajax加载功能，如 -

$(document).ready(function () { $.fn.MyPlugin = function (options) { var $elem=this; var init = function () { options.load = $.extend({}, $.fn.MyPlugin.defaultOptions.load, options.load); load(); } //adding load method to load data dynamically var load = function () { if (!options.load.url) { alert("url can not be empty"); } else { $.ajax({ url: options.load.url, type: options.load.type, data: options.load.data, success: function (response) { options.load.success.call(this, response); $elem.html(response).wrapInner('<div class="wrapper"/>');//wrap after data has been loaded successfully }, error : function (jqXHR, textStatus, errorThrown) { alert("error occured" + textStatus + " ," + errorThrown) } }) } } init(); } $.fn.MyPlugin.defaultOptions = { load: { tye: "get", data: {}, success: function () {} } };

现在使用你的插件 -

var $sidebar = $('.sidebar'); $sidebar.MyPlugin({ load: { url: 'http://fiddle.jshell.net/vikrant47/ncagab2y/1/show/' } }); });

DEMO with load

Answer 3

尝试在插件中添加以下内容。在gist处的 84 - 110 处添加。

            var target = $sidebar.get(0);

            // create an observer instance
            var observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    // do stuff when
                    // `childList` modified
                    // i.e.g., 
                    $.each(mutation.addedNodes, function (k, v) {
                        $(v)
                        .wrapInner('<div data-' 
                        + dataName 
                        + '="sub-wrapper"></div>')
                    })

                });
            });

            // configuration of the observer:
            var _config = {
                childList: true
            };

            // pass in the target node, as well as the observer options
            observer.observe(target, _config);

jsfiddle http://jsfiddle.net/guest271314/s5wzptc8/

请参阅MutationObserver

动态添加的元素不会换行

3 个答案:

DEMO

DEMO using $.get() Method

DEMO with load