Supongamos que quiero transformar todas las etiquetas <a> (existentes y creadas dinámicamente) que tienen una propiedad de data-params , por ejemplo, configurando el atributo href .
Parece que este código:
$('body').on('change', 'a[data-params]', function() { ... })solo funciona en elementos creados dinámicamente, no en elementos existentes.
Por otro lado, este código:
$('a[data-params]').each(function(index) { ... });solo funciona en elementos existentes.
Entonces, si quiero ambos (existentes y creados dinámicamente), necesito ambos códigos, idealmente definiendo primero mi función de transformación, luego:
$('a[data-params]').each(function(index) { processDataParams(this); }); $('body').on('change', 'a[data-params]', function() { processDataParams(this); });¿O me estoy perdiendo alguna forma más simple de hacer esto?
$('a[data-params]') devuelve todos los nodos con este atributo de datos. Siempre.
Creo que el problema está antes, en la creación de elementos dinámicos. Evite usar el método data jQuery cuando agregue los elementos, porque no actualiza el DOM (no agrega el atributo data-params deseado).
// Add some elements to the current doc ['magenta', 'olive'].forEach(color => { $('<a>', {html:color}) // .data('params', color) <-- this don't updates de DOM, 👎 jQuery .attr('data-params', color) .appendTo('#root') }) // Element unable to find with $('a[data-params]') $('<a>', {html: 'This elemnt won\'t update'}) .data('params', 'purple') .appendTo('#root') function transform() { $('a[data-params]').each((i, node) => { $(node).css('color', $(node).data('params')) $(node).attr('href', '#' + $(node).data('params')) }) } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="display: flex; flex-direction: column" id="root"> <a data-params='red'>red</a> <a data-params='blue'>blue</a> <a data-params='green'>green</a> </div> <hr> <button onclick="transform()">Transform Elements</button>Editado con las correcciones de @Spectric y @RokoC.Buljan . Gracias a todos.
Puede usar Jquery Event Delegation para ejecutar código (un detector de eventos) en todos los elementos secundarios (internos) de un elemento, ya sea que existan o no (porque está configurado en el principal, que ya existe). Puede leer más sobre la delegación de eventos en los documentos de JQuery: https://learn.jquery.com/events/event-delegation/
Ejemplo:
$('ul').on('click', 'li', function(event) { //code that will run on al <li> element clicks });este código se establece en el elemento ul y permite establecer un detector de eventos para todos los elementos li actuales y futuros que se encuentran dentro de ul.