Question

我在一个js文件中编写了带有deferd和promise的函数。之后，我在另一个HTML文件（在其中创建菜单）中调用该函数，此页面将用作Web部件。所以我想在菜单生成后运行该函数，该怎么做。

Ph.DAL = function() {
  this.getRequest = function(listName, select, filter, orderby, top, _async) {
    var dfd = $.Deferred()
    var request = baseRequest
    request.type = 'GET'
    request.async = _async
    request.url =
      siteAbsoluteUrl +
      "/_api/web/lists/getbytitle('" +
      listName +
      "')/items?" +
      (this.isNullOrEmpty(select) ? '' : '$select=' + select) +
      '&' +
      (this.isNullOrEmpty(filter) ? '' : '$filter=' + filter) +
      '&' +
      (this.isNullOrEmpty(orderby) ? '' : '$orderby=' + orderby) +
      '&' +
      (this.isNullOrEmpty(top) ? '' : '$top=' + top)
    request.headers = { ACCEPT: 'application/json;odata=verbose' }
    dfd = $.ajax(request)
    return dfd.promise()
  }

我要从另一个html页面调用以生成动态菜单

$(document).ready(function() {
    var utility = new Ph.DAL()
    var menuHTML = ''
    utility
      .getRequest(
        'Navigation',
        'Id,Title,Icon,URL,Target,ParentId,OrderBy',
        "Active eq 'Yes'",
        '',
        '',
        true
      )
      .done(function(data) {
        if (data && data.d && data.d.results && data.d.results.length > 0) {
          createMenu(data.d.results, null)
        }
        $('#respMenu').html(menuHTML)
        $('#respMenu').aceResponsiveMenu({
          resizeWidth: '768', // Set the same in Media query
          animationSpeed: 'fast', //slow, medium, fast
          accoridonExpAll: false, //Expands all the accordion menu on click
        })
      })
    function createMenu(jSON, parentId) {
      var _menu
      _menu = Enumerable.from(jSON)
        .where(function(value) {
          return value.ParentId == parentId
        })
        .orderBy(function(value) {
          return value.OrderBy
        })
        .toArray()
      if (_menu.length > 0) {
        _menu.map(function(item, i) {
          menuHTML +=
            '<li class="' +
            (item.URL.toLowerCase() == utility.pageName.toLowerCase() ? 'active' : '') +
            '"><a href="' +
            item.URL +
            '">'
          menuHTML +=
            '<i class="' +
            item.Icon +
            '"></i><span class="title">' +
            item.Title +
            '</span></a>'
          var subMenu = Enumerable.from(jSON)
            .where(function(value) {
              return value.ParentId == item.Id
            })
            .orderBy(function(value) {
              return value.OrderBy
            })
            .toArray()
          if (subMenu.length > 0) {
            createSubMenu(jSON, subMenu)
          }
          menuHTML += '</li>'
        })
      }
    }
    function createSubMenu(mainData, data) {
      menuHTML += '<ul>'
      data.map(function(item, i) {
        menuHTML += '<li><a href="' + item.URL + '">' + item.Title + '</a>'
        var subMenu = Enumerable.from(mainData)
          .where(function(value) {
            return value.ParentId == item.Id
          })
          .orderBy(function(value) {
            return value.OrderBy
          })
          .toArray()
        if (subMenu.length > 0) {
          createSubMenu(mainData, subMenu)
        }
      })
      menuHTML += '</li></ul>'
    }
  })

现在我正在尝试循环li并想在特定的类上添加活动类，但是生成了菜单，并且函数调用更早了，所以它不起作用。我该怎么办。

在创建菜单后运行此功能

 $.menuActive = function (menuItem) {
      $('#respMenu li').each(function() {
        if ($(this).text() == menuItem) {
          $(this).addClass('active')
          return false
        }
      })
    }

Answer 1

您应该尝试使用MutationObserver API

var mutationObserver = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // Do something here

  });
});

mutationObserver.observe(myRefElement, {attributes: true})

Answer 2

//You can use custom events
//Do this after  $('#respMenu').html(menuHTML)
$( "#respMenu" ).trigger( "list_ready" );

//In another file
$( "#respMenu" ).on( "list_ready", function () {
//Do ur stuff here
});

元素生成jQuery后运行功能

2 个答案: