jQuery如何选择AJAX无刷新页面时动态追加的元素

问题原因 #

你遇到的是动态生成DOM元素的事件绑定失效问题。常规的jQuery选择器+事件绑定写法（比如$('#deleteNew').click(...)）只会在代码执行的那一刻，给当时已经存在于DOM树中的元素绑定事件，后续通过AJAX动态追加的元素没有经过这个绑定步骤，所以无法触发你预设的事件逻辑。你说的「元素不存在于页面源代码中」是正常现象，浏览器的「查看页面源代码」只会展示页面初始加载的静态HTML内容，动态新增的元素需要在「开发者工具-元素面板」中才能看到。

解决方案：使用jQuery事件委托 #

你可以用jQuery提供的.on()方法做事件委托，把事件绑定到页面初始加载时就已经存在的父元素上（你这里的客户列表容器#list就是最合适的父元素），再通过第二个参数指定要触发事件的子元素选择器即可，事件会自动冒泡到父元素，匹配到对应子元素时触发逻辑，完全不需要刷新页面。

示例代码

1. 首先优化你追加行的代码（避免ID重复问题）

你现在写的id='New'、id='editNew'都是固定ID，新增多个客户后会出现ID重复的问题，不符合规范也会导致选择器出错，建议改成用类名标识操作按钮：

$.ajax({
  type: "POST",
  url: "traitement.php",
  data: {nom, prenom, email},
  dataType: "json",
  success: function (res) {
    // 这里注意要从接口返回拿到新增客户的唯一id，不要用固定id
    const id = res.id
    $("#reponse")
      .hide()
      .html("<span class='sucess'> Client ajouté avec succès. </span>")
      .fadeIn(1000);  
    $("input").val('');
    // 改用模板字符串写法更清晰，用类标识操作按钮，行id用客户唯一id
    $("#list").append(`
      <tr id="customer-${id}">
        <td>${id}</td>
        <td>${nom}</td>
        <td>${prenom}</td>
        <td>${email}</td>
        <td class="edit-item"><button><i class='fa fa-edit'></i></button></td>
        <td class="delete-item"><button><i class='fa fa-trash-o'></i></button></td>
      </tr>
    `);
  },
  error: function() {
    $("#reponse")    
    .html("<span class='error'> Une erreur s'est produite. </span>");
  }            
});

2. 绑定动态元素的事件

直接把事件绑定到#list上，后续所有新增的子元素都会自动匹配到事件：

// 删除客户逻辑
$('#list').on('click', '.delete-item button', function() {
  // 获取当前点击的行
  const currentRow = $(this).closest('tr')
  const customerId = currentRow.attr('id').replace('customer-', '')
  // 这里写你删除客户的AJAX请求逻辑，请求成功后直接移除当前行即可，无需刷新
  currentRow.remove()
})

// 编辑客户逻辑
$('#list').on('click', '.edit-item button', function() {
  const currentRow = $(this).closest('tr')
  // 取出当前行的客户信息，填到编辑表单里
  const customerInfo = {
    id: currentRow.attr('id').replace('customer-', ''),
    nom: currentRow.find('td:eq(1)').text(),
    prenom: currentRow.find('td:eq(2)').text(),
    email: currentRow.find('td:eq(3)').text()
  }
  // 这里写你填充编辑表单、提交修改的逻辑，修改成功后直接更新currentRow的内容即可
})

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