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

Question

刚刚使用 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 添加的新元素中获取数据属性？

Answer 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>

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

Get Data Attribute from the new HTML Element just added using Jquery

html

javascript

jquery

attributes

dom