从刚刚使用 Jquery 添加的新 HTML 元素中获取数据属性答案

【问题标题】：Get Data Attribute from the new HTML Element just added using Jquery从刚刚使用 Jquery 添加的新 HTML 元素中获取数据属性
【发布时间】：2021-12-15 03:19:59
【问题描述】：

刚刚使用 jquery .html() 在我的 HTML 代码中添加了新元素，但无法从这个新元素中获取数据属性。

插图：

<div class="row" id="append">
  <div class="col-12" id="newElement">
    <button>Add new element</button>
  </div>
  <div class="col-md-3 see-id">
    <button data-id="0.901065887770927">Check ID</button>
  </div>
</div>
<script>
  $(document).ready(function(){
    $('.see-id').click(function(){
      alert($(this).data('id'));
    })
    $('#newElement').click(function(){
      var rand = Math.random();
      $('#newElement').after('<div class="col-md-3 see-id"><button data-id="'+rand+'">Check ID</button></div>');
    })
  })
</script>

如何使用 DOM 从刚添加的新元素中获取数据属性？

【问题讨论】：

标签： javascript html jquery dom attributes

【解决方案1】：

因为您要向文档中添加新的 HTML，所以您需要 use event delegation 来获取数据。将侦听器附加到父元素，在本例中为 .row。但是你还需要定位按钮，所以你的选择器应该是.see-id button。

注意：我已将 HTML 分离出来，以便查询可以更好地工作。在.row div 中的先前按钮之前添加了新按钮，当您单击它们时可能会产生误导性结果。在这个例子中，我使用了append。

$(document).ready(function() {

  $('.row').on('click', '.see-id button', function () {
   const id = $(this).data('id');
   console.log(id);
  });

  $('#newElement').on('click', function () {
    const rand = Math.random();
    $('.row').append(`<div class="col-md-3 see-id"><button data-id="${rand}">Check ID</button></div>`);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newElement">
  <button>Add new element</button>
</div>
<div class="row"></div>

【讨论】：

太好了，谢谢。非常感谢