javascript - 动态加载页面后无法访问dom树

Question

欢迎我在登陆 jquery 时遇到问题。我使用 empty() 或 remove() 函数从 div 中删除所有内容。问题是当页面动态加载到该 div 时，我无法使用 jquery 访问该 div 内的任何加载元素。

get响应的数据如下

<div id="menu">
  <ul>
    <li><a href="#">link</a> <a href="#e">[E]</a>
      <ul>
        <li><a href="#">link</a> <a href="#e">[E]</a></li>
      </ul>
    </li>
    <li><a href="#">link</a> <a href="#e">[E]</a></li>
  </ul>
</div>

$('#menu').empty()

$.get('.php?id=get_menu', function(data) 
      {
	    $('#menu').append(data);
      });

加载后如果我单击 e(编辑)jquery 什么都不做

这是我使用的 jquery 脚本

$('.form').submit(function(event) {
  var $form = $(this);
  var $inputs = $form.find("input, select, button, textarea");
  var serializedData = $form.serialize();
  
  request = $.ajax({
	url: "check.php?id=update_menu",
	type: "post",
	data: serializedData
  });
  
  request.done(function (response, textStatus, jqXHR){
    $('#menu').empty('<div class="preloader-big"></div>');
    $.get('admin_index.php?id=get_menu', function(data) {
		$('#menu').append(data);
    });
  });
  
  request.always(function () {
    $('.preloader-big').fadeOut();
  });
});

php脚本输出准备好使用格式化的html代码

我的帖子的答案

此代码在单击字母 e 后获取 php 数据

    $('.optedit').on('click', function() {
     
      $.get('admin_index.php?id=get_menu_edit&mid='+menu_id[1], function(data) {
        
        $('#link_name').val(res[2]);
        $('#link_title').val(res[3]);
        $('#mid').val(res[1]);
        )};
    )};

我只是把他打包成一个我称之为 update_menu() 的函数；并在之后重复该功能

$.get('.php?id=get_menu', function(data) {
  $('#menu').append(data);
  update_menu();
})

这就是更新 jquery 代码以使用刚刚添加的代码。一切正常。

感谢您的帮助:)

Answer 1

empty() 不仅会删除子(和其他后代)元素，还会删除匹配元素集中的任何文本。

如果您想在不破坏其数据或事件处理程序的情况下删除元素(以便以后可以重新添加它们)，请改用 .detach()。