Acabo de agregar un nuevo elemento en mi código HTML usando jquery .html() pero no puedo obtener el atributo de datos de este nuevo elemento.
Ilustración:
<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>¿Cómo obtener el atributo de datos del nuevo elemento que acaba de agregar usando DOM?
Debido a que está agregando HTML nuevo al documento, necesita usar la delegación de eventos para obtener los datos. Adjunte el oyente al elemento principal, en este caso .row . Pero también debe apuntar al botón, por lo que su selector debería ser .see-id button .
Nota: he separado el HTML para que la consulta funcione mejor. Se agregaron nuevos botones antes que los anteriores en el div .row , lo que podría dar resultados engañosos al hacer clic en ellos. En este ejemplo, uso append en su lugar.
$(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>