如何从AJAX返回的<ul>选中<li>元素中获取对应数据？

1. 先梳理你的列表结构（参考示例） #

假设AJAX返回后渲染的列表是这样的（建议把需要的记录数据存在<li>的data-*属性里，方便后续获取）：

<!-- 这个父容器是页面加载时就存在的静态元素 -->
<ul id="register-list-container">
  <!-- 下面的<li>是AJAX动态生成的 -->
  <li data-record-id="101" data-record-email="user1@example.com">用户1 - 注册ID:101</li>
  <li data-record-id="102" data-record-email="user2@example.com">用户2 - 注册ID:102</li>
</ul>

2. jQuery版本的事件委托实现 #

如果你的项目用jQuery，直接通过on()方法把事件绑定到静态父容器：

// 页面加载完成后就绑定，不用等到AJAX返回
$(document).ready(function() {
  // 绑定到静态父容器，监听子元素<li>的点击
  $('#register-list-container').on('click', 'li', function() {
    // 获取当前选中<li>的data属性数据
    const recordId = $(this).data('record-id');
    const recordEmail = $(this).data('record-email');
    // 也可以直接获取<li>的文本内容
    const recordText = $(this).text().trim();

    // 这里就可以处理选中的数据了，比如传给后续逻辑
    console.log('选中的记录ID:', recordId);
    console.log('选中的用户邮箱:', recordEmail);
  });
});

3. 原生JavaScript版本实现 #

如果不用jQuery，思路完全一致，给父容器绑定点击事件后判断目标元素：

document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('register-list-container');
  
  container.addEventListener('click', function(e) {
    // 兼容点击<li>内部嵌套元素的情况，找到最外层的<li>
    const selectedLi = e.target.closest('li');
    if (selectedLi) {
      // 获取data属性（注意dataset会自动把连字符转成驼峰）
      const recordId = selectedLi.dataset.recordId;
      const recordEmail = selectedLi.dataset.recordEmail;
      // 获取文本内容
      const recordText = selectedLi.textContent.trim();

      console.log('选中的记录ID:', recordId);
      console.log('选中的用户邮箱:', recordEmail);
    }
  });
});

4. 关键注意点 #

• 一定要绑定到页面初始加载时就存在的静态父元素，不能是AJAX动态生成的元素，否则委托无效。
• 如果你之前是在AJAX的success回调里绑定点击事件，容易出现重复绑定的问题（每次AJAX请求都绑定一次），用事件委托只需要绑定一次就够了。
• 如果你的<li>里有嵌套元素（比如<span>、<button>），用closest('li')（原生）或者jQuery的事件委托自动指向<li>，能确保准确获取到目标元素。

如果你的模板列表结构和示例不同，可以把具体的模板代码贴出来，我再帮你调整细节~

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