jquery-ui - 编辑 Bootstrap 模板，动态添加 jarvisWidget 并在页面加载后重新生成小部件

Question

我正在使用来自 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()动态添加到页面的小部件。

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

Answer 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"
});

希望对您有所帮助。