Javascript 动态添加的元素不'；t包装

在我的插件中，我需要将所有侧边栏的子元素包装在一个div中，让它们溢出，但是如果这些元素是动态加载的，那么函数就不能工作，我也不知道如何使它工作

代码是：

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

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

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

$sidebar.MyPlugin();

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

变量$sidebar=$（'.sidebar'）；
$sidebar.load（'externalpage.ext'）；
$sidebar.MyPlugin（）；
$.fn.MyPlugin=函数（）{
这是wrapInner（“”）；
});

如果这些元素不是动态加载的，那么就没有问题

首先，守则是：

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

$sidebar.wrapInner（“”）；

如果Elemen没有动态加载，那么这很好，所以我尝试了以下方法：

var children = $sidebar.children();

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

var children=$sidebar.children（）；
$（文档）.on（'load'，children，function（））{
$（此）.wrapAll（“”）；
});

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

我本以为这一次也会奏效，但事实并非如此。我错了什么

你可以找到完整的代码。 还有一个演示

更多详细信息

---

我想从内部处理这个问题，而不是从外部！我不知道用户是否会自动加载内容。这就是重点。

---

因此，有一种方法可以在插件内部而不是外部处理此问题？

来自手册

回调函数

如果提供了“完整”回调，则在 已执行后处理和HTML插入。回调是 为jQuery集合中的每个元素触发一次，并设置 依次添加到每个DOM元素

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

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

谢谢。

进行ajax调用加载数据

因此，在

div.sidebar

中加载任何数据之前，有可能调用了

this.wrapInner（“”）

方法。 确保在使用完整回调成功加载所有数据后调用

this.wrapInner（“”）

触发每个div的回调，从回调调用插件

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

或

如果您使用的只是在多个元素中加载，那么您可能会使用一种更强大的jQuery ajax方法（即get（）或post（）或ajax（）

更新-

回复评论-

您不必担心用户会像这样调用您的插件

$sidebar.load（…）.MyPlugin（）

。用户必须充分了解如何处理

异步方法

只有当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 () {}
        }
    };

尝试将下面的部分添加到插件中。在第84-110行添加

var target=$sidebar.get（0）；
//创建一个观察者实例
var观察者=新的突变观察者（功能（突变）{
突变。forEach（功能（突变）{
//什么时候做事
//`childList`已修改
//例如。，
$.each（突变.附加节点，函数（k，v）{
$（五）
.wrapInner（“”）
})
});
});
//观察员的配置：
变量_配置={
儿童名单：对
};
//传入目标节点以及观察者选项
观察者观察（目标，配置）；

JSFIDLE

请参见
不确定这是否有助于@dcdeiv，但尝试设置一个小提琴，以证明问题可能有点不同：结果应在单击后显示
你好
背景色：红色@caramba可能我没抓住重点，这就是你要找的：？@IrvinDominin谢谢你的评论，它有点：）但是需要在load函数之外添加wrapInner。元素从某个地方加载，我想从其他地方操纵它。@caramba但是在你的小提琴中，wrapInner在单击之前被激发，所以元素在那一刻不存在。如果您在下一刻（如再次单击）执行wrapInner，它就会工作。你能提供你的具体比赛吗？@Irvindimin感谢你的时间和努力。换句话说：我有一个正在加载并向DOM添加元素的库。现在完成后，我想更改其中一些元素（添加其他元素）。我有一个
gallery.ready（）
但不起作用谢谢你的回答，已经加载了trid
但不起作用。在问题所在的上方添加了一个提琴。你可以在那里试试
$（window.load（function（）{}）包含在这里它工作得很好，（它将包装.sidebar div，如果你想包装内部元素，那么你应该在内部元素上调用.MyPlugin）好吧，因为我无法控制用户做什么，我想从内部处理这个问题，而不是从外部！我不知道用户是否会自动加载内容。这就是问题所在。您仍然可以向用户请求一个类或jquery选择器来选择内部元素。在pluginI的配置中，您希望从内部而不是外部处理此问题！我不知道用户是否会以友好的方式加载内容。这看起来非常有趣，等我有更多时间再查看。亲爱的客人，谢谢您的回答！
$(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/'
        }
    });
});

            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);