动态加载页面后无法访问dom树答案

【问题标题】：Cannot access to dom tree after dynamically loaded page动态加载页面后无法访问dom树
【发布时间】：2015-01-30 09:22:22
【问题描述】：

欢迎我在登录 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 代码以使用刚刚添加的代码。一切正常。

感谢您的帮助:)

【问题讨论】：

在您的开发工具的帮助下检查是否有错误。
我读过一些关于它的文章。 jQuery 在empty() 之后在DOM 树中看不到这段代码
正如@ronan 所说，如果您想稍后检索此数据，您应该使用 detach。此外，您应该将数据存储在变量中以便可以检索（分离不会调用简单的字符串，值必须存储在变量中）。

标签： javascript jquery html css

【解决方案1】：

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

如果您想删除元素而不破坏其数据或事件处理程序（以便以后可以重新添加），请改用.detach()。

【讨论】：

【解决方案2】：

似乎在这里工作，从 .php?id=get_menu 检查你的结果

	    $('#ammend').on('click',function(){
          $('#menu').append('<ul><li>hello</li><li>there</li></ul>');
          });
$('#empty').on('click',function(){
          $('#menu').empty();
          });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="ammend">Ammend</button>
<button id="empty">Empty</button>
<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>

【讨论】：

【解决方案3】：

您的代码似乎没有问题。您必须检查通话中使用的网址.php?id=get_menu。这似乎不完整。

另外，您可能想检查 jQuery 的负载而不是 get 来简化事情。使用方法如下：

$("#menu").load("content_generator.php");

如果你想在成功时触发一个事件：

$("#menu").load("content_generator.php", function(){
    console.log("Successful")
});

让我知道这是否清楚。

jQuery load documentation

【讨论】：

【解决方案4】：

我粘贴在我的 jquery 代码上方。这完成了与php联系并输出一些html代码的工作

【讨论】：