Escribí un código que cambia el tamaño de cada área de texto (que tiene clase de tamaño automático) en el documento. funciona bien:
$(document).each('textarea.autosize', function(){ $(this).attr("style", "height:" + (this.scrollHeight) + "px; overflow-y:hidden;"); }).on("input", function(){ this.style.height = "auto"; this.style.height = (this.scrollHeight) + "px"; });Pero el contenido de mi página web es dinámico. para el evento de clic puedo hacer esto:
$(document).on('click', '.myClass', function(){}); Pero para each no puedo. ¿Cómo puedo usar each para elementos que aún no están en el DOM?
Coloque la funcionalidad de tamaño automático en una función a la que pueda llamar cuando agregue elementos al DOM:
function autosize() { $(document).each('textarea.autosize', function() { $(this).attr("style", "height:" + (this.scrollHeight) + "px; overflow-y:hidden;"); }).on("input", function(){ this.style.height = "auto"; this.style.height = (this.scrollHeight) + "px"; }); } autosize();Si agrega elementos, puede hacer:
$('.add').click(function() { $(document).append($('<textarea />', { class: 'autosize' })); autosize(); });Alternativamente, si no desea agregar esto en todas partes, agregue algo:
setInverval(autosize, 100);Precaución: ¡Esta solución se considera mala para su rendimiento! Así que considere usar una de mis otras soluciones.
Si solo desea hacer esto, cuando en realidad se agrega un elemento, puede escuchar esto a través de MutationObserver :
var observer = new MutationObserver(function(mutations) { var elements = [ ...mutation.addedNodes].filter((node) => node.tagName.toLowerCase() === 'textarea' && node.classList.contains('.autosize')); if (elements.length) { autosize(); } }); observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});Puede ser mejor para su rendimiento no volver a consultar los elementos ya modificados (como se indica en los comentarios):
$(document).each('textarea.autosize', autosize).on("input", resize); function autosize() {function() { $(this).attr("style", "height:" + (this.scrollHeight) + "px; overflow-y:hidden;"); } function resize() { this.style.height = "auto"; this.style.height = (this.scrollHeight) + "px"; } autosize(); En este caso, debe ejecutar tanto autosize() como resize() cuando se agrega un nuevo elemento.