触发click事件后,DOM不会更新

时间:2016-03-03 14:51:45

标签: javascript jquery dom refresh

我到处搜索但无法找到解决问题的方法。

所以这就是:

我的页面上有一个动态创建的树。当用户点击某个节点时,我想将用户重定向到他请求的URL,在加载的页面中,我想通过从root创建一个树来到达被点击的节点。

  • 用户点击一个节点。
  • 我得到了点击节点链的ID。
  • 用户导航到某个页面。
  • 我使用节点ID来动态创建和选择必要的树节点。

但是在我的for循环中选择函数。 $(item).trigger("click")之后 触发dom没有更新,因此在循环中断的第二次迭代中。

$(document).ready(function() {
  var $this = $("#cssmenu");
  var headers = {};
  headers['__RequestVerificationToken'] = $('input[name="__RequestVerificationToken"]').val();
  $.ajax({
    type: "POST",
    url: '/Home/GetSubCategories',
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({
      id: 0
    }),
    dataType: "json",
    headers: headers,
    success: function(response) {
      if (response != null) {
        $this.find("ul").remove();
        $this.append("<ul></ul>");
        for (var i = 0; i < response.length; i++) {
          if (response[i].HasChildren) {
            $this.children("ul").append("<li class='has-sub'><a href = '#' data-cid = '" + response[i].Id + "' data-code = '" + response[i].Kodu + "'>" + response[i].Aciklama + "</a></li>");
          } else {
            $this.children("ul").append("<li><a href = '/" + response[i].Url + "' data-cid = '" + response[i].Id + "' data-code = '" + response[i].Kodu + "'>" + response[i].Aciklama + "</a></li>");
          }
        }


      }
    },
    error: function(response) {
      // bir sorun olu&#351;tu
    },
    complete: function(response) {
      var numbersArray = $("#treeNodes").val().replace("[", "").replace("]", "").split(',').map(Number);
      select(numbersArray);
    }
  });


});



function select(position) {

  for (var i = 0; i < position.length; i++) {
    var selector = '[data-cid="' + position[i] + '"]';
    $('#cssmenu').show();
    var item = $('#cssmenu').find(selector);
    //sonuna gelmediyse expand
    if (i !== position.length - 1) {
      //se&#231;ili item in &#231;ocuklar&#305;
      $(item).trigger("click");
    } else {
      //sonuna geldiyse select
      $(item).parent().addClass("active");

    }
  }
}


$(document).on('click', '#cssmenu li.has-sub>a', function(e) {
  e.preventDefault();
  var $this = $(this);
  var value = $(this).val();
  var parent = $this.parent("li");


  headers['__RequestVerificationToken'] = $('input[name="__RequestVerificationToken"]').val();
  $.ajax({
    type: "POST",
    url: '/Home/GetSubCategories',
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({
      id: $this.data("cid")
    }),
    dataType: "json",
    headers: headers,
    success: function(response) {
      if (response != null) {
        parent.children("ul").remove();
        parent.append("<ul></ul>");
        for (var i = 0; i < response.length; i++) {
          if (response[i].HasChildren) {
            parent.children("ul").append("<li class='has-sub'><a href = '#' data-cid = '" + response[i].Id + "' data-code = '" + response[i].Kodu + "'>" + response[i].Aciklama + "</a></li>");
          } else {
            parent.children("ul").append("<li><a href = '/" + response[i].Url + "' data-cid = '" + response[i].Id + "' data-code = '" + response[i].Kodu + "'>" + response[i].Aciklama + "</a></li>");
          }

        }

      }
    },
    error: function(response) {
      // bir sorun olu&#351;tu
    }

  });

  var element = $(this).parent('li');
  if (element.hasClass('open')) {
    element.removeClass('open');
    element.find('li').removeClass('open');
    element.find('ul').slideUp(200);
  } else {
    element.addClass('open');
    element.children('ul').slideDown(200);
    element.siblings('li').children('ul').slideUp(200);
    element.siblings('li').removeClass('open');
    element.siblings('li').find('li').removeClass('open');
    element.siblings('li').find('ul').slideUp(200);
  }

  return false;

});

0 个答案:

没有答案