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

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

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

请您参考如下方法:

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

我在里面插入小部件

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

我首先销毁了现有的小部件

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

然后使用

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

您还可以将默认值传递为:

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

希望对您有所帮助。