Блог

Только что добавил новый элемент в свой HTML-код с помощью jquery .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?

Поскольку вы добавляете новый HTML в документ, вам необходимо использовать делегирование событий для получения данных. В данном случае присоедините прослушиватель к родительскому элементу .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>