如何用jQuery选择AJAX响应中的新ID元素？AJAX更新后能否选新ID元素？

1. 能不能选择AJAX更新前页面中不存在的ID元素？ #

答案是不行。jQuery（包括原生JS的DOM操作）只能识别当前已经存在于DOM树中的元素。如果某个ID的元素还没通过AJAX加载并插入页面，你提前用$('#newID')去选择，得到的只会是一个空的jQuery对象，根本没法对它执行任何操作。

举个反例，要是你在AJAX请求刚发送完就写：

// 这时候newID元素还没加载到页面，完全选不到
$('#newID').hide();

这行代码不会报错，但绝对起不到任何作用——因为目标元素还不存在于DOM里。

2. 如何使用jQuery从AJAX响应中通过新生成的ID选择元素？ #

核心原则是：必须等到AJAX请求完成，新元素已经被插入到DOM之后，再去选择它。毕竟AJAX是异步操作，你不能在发送请求后立刻去选，得在请求成功的回调函数里处理新元素。

结合你给出的场景，咱们把伪代码补成可运行的实际例子：

原始页面结构 #

<div id="divToUpdateWithAJAX">
  <button onclick="hideElement('oldID')">隐藏旧元素</button>
  <div id="oldID">我是页面初始的旧元素</div>
</div>
<button onclick="loadNewContent()">加载新内容</button>

AJAX更新与新元素选择的代码 #

function loadNewContent() {
  $.ajax({
    url: '/你的接口地址', // 替换成实际的AJAX接口地址
    method: 'GET',
    success: function(response) {
      // 把AJAX返回的内容插入到目标div中
      $('#divToUpdateWithAJAX').html(response);
      
      // 现在新元素已经存在于DOM里了，可以直接通过ID选择
      // 假设返回的内容里包含id为newID的元素
      $('#newID').css('color', 'blue'); // 比如给新元素设置蓝色字体
      
      // 如果新内容里的按钮需要绑定事件，也得在这时候处理
      $('#newHideButton').click(function() {
        hideElement('newID');
      });
    }
  });
}

function hideElement(elementId) {
  $('#' + elementId).hide();
}

要是你用更简洁的$.load()方法，也可以在它的回调里操作新元素：

$('#divToUpdateWithAJAX').load('/你的接口地址', function() {
  // 回调触发时，新内容已经加载完成，这里可以直接选择新ID元素
  $('#newID').hide();
});

关键总结 #

• 异步操作要等回调：AJAX不会阻塞代码执行，必须在请求成功的回调函数里处理新元素
• 元素存在才能选：只有当新元素被插入DOM树后，jQuery才能成功定位到它

内容的提问来源于stack exchange，提问作者dewitman