javascript - 动态添加的元素不换行

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

如果没有动态加载元素，这就可以正常工作，所以我尝试了这种方式:

var children = $sidebar.children();

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

但是，这当然行不通。你能帮帮我吗？

我认为 this rule这次也会工作，但没有。我做错了什么？

你可以找到完整的代码here .和一个演示 here

更多详情

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

Answer 1

来自手册

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

Callback Function

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

尝试下面的代码，看看是否可行:

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

谢谢。