编辑引导模板，动态添加 jarvisWidget 并在页面加载后重新生成小部件答案

【问题标题】：Editing a bootstrap template, adding dynamically jarvisWidget and regenerate the widgets after the page allready been loaded编辑引导模板，动态添加 jarvisWidget 并在页面加载后重新生成小部件
【发布时间】：2014-11-07 15:18:57
【问题描述】：

我正在使用来自https://wrapbootstrap.com/ 的智能管理面板

他们使用jarvisWidget / smart widget，非常好用。

我遇到的问题是，页面加载后，我使用jquery 函数动态添加一些小部件：

$(".items-container").append('<article class="col-xs-12 col-sm-6 col-md-4 col-lg-3 sortable-grid ui-sortable">\
                                        <div class="jarviswidget" id=wid-id-"'+itemId+'">   \
                                            <header>\
                                                <span class="widget-icon"> <i class="glyphicon glyphicon-search"></i> </span>\
                                                <h2>'+ data.title +'</h2>               \
                                            </header>   \
                                            <div>\
                                                <div class="jarviswidget-editbox"> \
                                                    <!-- This area used as dropdown edit box --> \
                                                    <input class="form-control" type="text">    \
                                                </div>\
                                                <div class="widget-body">\
                                                    Here is an item\
                                                </div>\
                                            </div>\
                                        </div>\
                                    </article>');

小部件是作为纯 HTML 添加的，而不是作为 html 页面上的预定义小部件重新生成的。

如何重新初始化当前页面上的所有当前小部件/仅初始化那些尚未初始化的小部件？

我现在找到的一个临时解决方案是创建自己的pageSetUp(); 方法，并仅在我完成将所有小部件动态加载到页面时调用setup_widgets_desktop()。

但我正在寻找更坚固的东西。

【问题讨论】：

您解决了这个问题吗？

标签： jquery-ui twitter-bootstrap-3 template-engine

【解决方案1】：

我遇到了同样的问题。我正在调用 ajax 方法将小部件添加为 html。调用pageSetUp(); 和setup_widgets_destop(); 将重新初始化所有元素，因此最好只重新初始化容器内的小部件。我的解决方案如下：

我在里面插入小部件

$("#div-id").html(widgetsHTML);

我首先使用破坏了现有的小部件

 $("#div-id").jarvisWidgets('destroy');

然后使用

重新初始化div内的所有小部件

$("#div-id").jarvisWidgets();

您也可以将默认值传递为：

$("#form-data").jarvisWidgets({
    "fullscreenClass": "fa fa-expand | fa fa-compress",
    "toggleClass": "fa fa-minus | fa fa-plus"
});

我希望这会有所帮助。

【讨论】：