为何AJAX调用传递<div>的ID而非目标<button>的ID？

嘿，我来帮你搞清楚为什么AJAX传的是<div>的ID而不是<button>的ID～

核心原因 #

大概率是你的AJAX事件绑定到了外层的.delbuttons div上，而不是按钮本身。因为浏览器的事件冒泡机制，当你点击按钮时，事件会向上传递到它的父元素div，这时候你用$(this)获取ID的话，拿到的就是div的ID（也就是你写死的5），而不是按钮上动态生成的$info['id']。

看你的PHP代码，按钮嵌套在div里：

<div class="delbuttons" id='5'> 
  <button data-toggle="modal" data-target="#myModal" id='" .$info['id']. "'> Delete </button> 
  ...
</div>

这里还有个小问题：所有循环生成的div都用了id='5'，HTML里ID必须是唯一的，这可能会引发其他奇怪的问题，建议要么删掉这个div的ID，要么改成唯一值（比如id="del-container-<?php echo $info['id']; ?>"）。

解决方案 #

方案1：直接把事件绑定到按钮上

这是最直接的方式，把AJAX的点击事件绑定到按钮元素，而不是外层div：

// 绑定到.delbuttons下的按钮
$('.delbuttons button').click(function() {
  // 这里的$(this)就是被点击的按钮，能拿到正确的ID
  var targetId = $(this).attr('id');
  // 执行你的AJAX调用逻辑
  $.ajax({
    url: '你的接口地址',
    data: { id: targetId },
    // 其他配置...
  });
});

方案2：如果必须绑定在div上，精准获取按钮ID

要是你因为某些原因必须把事件绑定在div上，可以通过事件对象的target属性找到实际点击的按钮，或者直接在div里查找子按钮：

$('.delbuttons').click(function(e) {
  // 先判断点击的是按钮元素
  if ($(e.target).is('button')) {
    var targetId = $(e.target).attr('id');
    // 执行AJAX逻辑
  }
});

// 或者直接查找div下的按钮
$('.delbuttons').click(function() {
  var targetId = $(this).find('button').attr('id');
  // 执行AJAX逻辑
});

这样就能拿到你期望的按钮ID啦～

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