异步加载数据后重置 MetisMenu答案

【问题标题】：Reset MetisMenu after loading data asynchronously异步加载数据后重置 MetisMenu
【发布时间】：2015-09-28 15:54:09
【问题描述】：

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

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

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

但它不起作用。

【问题讨论】：

能贴出相关的HTML和JavaScript吗？

标签： jquery ajax plugins metismenu

【解决方案1】：

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

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

所以你要做的就是首先销毁现有的 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");
    });
}

【讨论】：

当我使用 $('#menu').metisMenu('dispose');得到“Uncaught TypeError: this.dispose is not a function”错误
@kscius，你用的是哪个版本？

【解决方案2】：

打电话

$('#menu').metisMenu()

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

确保您已将新对象作为<li> 元素添加到菜单的<ul> 下。在调用 metisMenu 之前，还要检查您是否确实更新了 DOM（而不仅仅是从服务器检索到新对象）。

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

【讨论】：