如何通过DOM获取jQuery动态新增HTML元素的Data属性

嘿，这问题我太熟了——你碰到的是动态元素事件绑定的经典坑！

你一开始用.click()给.see-id绑定的点击事件，只会作用在页面加载完成时就已经存在的DOM元素上。后来通过.after()新增的那些.see-id元素，根本没被绑定这个事件，所以点击它们自然没法触发获取data属性的逻辑。

解决办法很简单，用事件委托就行——把事件绑定到一个始终存在的父级元素上，让它帮我们监听子元素的事件。这样不管子元素是一开始就有的，还是后来动态加的，事件都能正常触发。

给你改好的完整代码：

<div class="row" id="append"> 
  <div class="col-12" id="newElement"> 
    <button>添加新元素</button> 
  </div> 
  <div class="col-md-3 see-id"> 
    <button data-id="0.901065887770927">查看ID</button> 
  </div> 
</div> 
<script> 
$(document).ready(function(){
  // 把事件委托给父容器#append，监听所有.see-id下的button点击
  $('#append').on('click', '.see-id button', function(){
    // 这里的this就是被点击的按钮，直接取它的data-id
    alert($(this).data('id'));
  })
  
  $('#newElement').click(function(){
    var rand = Math.random();
    $('#newElement').after('<div class="col-md-3 see-id"><button data-id="'+rand+'">查看ID</button></div>');
  })
})
</script>

顺便帮你修正了一个小问题：之前的代码里，$(this)指向的是.see-id这个div，但data-id其实是在按钮上，所以原来的静态元素点击也拿不到正确的ID。现在改成直接监听按钮的点击，this就指向按钮本身，能直接获取data-id了。

如果偏要绑定到.see-id这个div上，也可以这么写：

$('#append').on('click', '.see-id', function(){
  alert($(this).find('button').data('id'));
})

效果是一样的，点击div的时候找到里面的按钮再取属性就行。

内容的提问来源于stack exchange，提问作者Tsuké Aér