jquery - 异步加载数据后重置 MetisMenu

Question

我正在使用带有动态的MetisMenu<div>。当我在 this 下加载新的子菜单<div>时，插件停止运行。

有没有办法在我的 AJAX 调用的成功部分重置插件？我试过了：

$('#menu').metisMenu({
   toggle: false // disable the auto collapse. Default: true.
});

但它不起作用。

Answer 1

MetisMenu不能被多次调用，因为它init()在其生命周期中只调用一次函数。

因此，这意味着如果您使用 ajax 异步加载元素的内容，<div id="menu">然后再次绑定事件到<div id="menu">by$('#menu').metisMenu();不会有任何区别。

所以你要做的是首先销毁现有的 metismenu 事件处理程序，然后创建一个新的，如下所示：

$('#menu').metisMenu('dispose'); //to stop and destroy metisMenu
$('#menu').metisMenu();

下面的代码在angularjs中

angular
  .module('app', [])
  .controller('menuCtrl', menuCtrl);

menuCtrl.$inject = ['$scope', '$http'];

function menuCtrl($scope, $http) {
  var url = "http://localhost/api/menus";

  $http.post(url)
    .success(function (data, status, headers, config) {

      // Destroy the existing metisMenu
      angular.element("#menu").metisMenu('dispose');

      //---- Update You div with data -----//

      // Create new binding
      angular.element("#menu").metisMenu();
    })
    .error(function (data, status, headers, config) {
      console.log("Error");
    });
}

Answer 2

打电话

$('#menu').metisMenu()

应该足以让 MetisMenu 了解您通过 AJAX 调用添加的任何新列表元素。

确保您已将新对象作为<li>元素添加到菜单的<ul>. 在调用metisMenu.

（请注意，该toggle选项显然不会改变菜单的初始外观，该菜单最初将被折叠并需要单击才能展开。）