Question

我使用来自https://almsaeedstudio.com/的AdminLTE皮肤我想在点击左侧的菜单时动态加载页面内容。我是通过jQuery创建的：

<li><a href="javascript::;" onclick="$('#Content').load('./pages/test.php');"><i class="fa fa-circle-o"></i>Test</a></li>

但是当Test.php是一个像这样的可折叠盒子时：

<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-medkit"></i>
<h3 class="box-title">Test Box</h3>
<div class="box-tools pull-right">  
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="box-body">TestContent</div>
</div>

当我点击按钮没有任何反应时，该框不可折叠。当我不动态加载内容时，按钮可用。这是怎么回事？

感谢您的帮助。

Answer 1

我面临同样的情况。当我在寻找一种解决方法时，我已经设法发现了什么似乎是真正的问题。

如果您仔细查看app.js，您会发现有许多激活方法可以扫描页面以查明是否已使用某个组件，然后转换或注入该组件的行为。

盒子似乎就是这种情况（至少可折叠和可关闭）。

如果您重新加载脚本（$ .getScript（app.js）），该框将起作用，但遗憾的是其他组件将停止工作（侧边栏和控制侧边栏）。

如果你只想让盒子在de content-wrapper里面工作，一种方法是调用：

$.AdminLTE.boxWidget.activate();

您可以在内容的$（document）.ready（）函数上执行此操作。我仍然在寻找一种更好的方法来做到这一点，但就盒子来说，这应该可以做到。

此致乔纳森·内维斯

Answer 2

我遇到了同样的问题，最后更改了app.js，以便盒子小部件监听器在文档上，而不是在调用activate（）时找到的实际元素。这可以保证找到动态添加的元素：

  $.AdminLTE.boxWidget = {
    selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
    icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
    activate: function () {
      var _this = this;
      //Listen for collapse event triggers
      $(document).on('click', _this.selectors.collapse, function (e) {
        e.preventDefault();
        _this.collapse($(this));
      });

      //Listen for remove event triggers
      $(document).on('click', _this.selectors.remove, function (e) {
        e.preventDefault();
        _this.remove($(this));
      });
    },
    //...
}

JS - 如何在内容动态加载时使AdminLTE（正在使用Bootstrap）中的Box可折叠

2 个答案: