Estoy tratando de agregar un evento keyup en mi elemento de entrada creado dinámicamente.
El evento keyup no funciona cuando ejecuto el código. ¿Dónde me he equivocado?
for(var j = 1; j < table.rows.length; j++){ if(table.rows[j].cells.item(10).innerHTML != 0 && table.rows[j].cells.item(10).innerHTML != null){ var row = t1.insertRow(t1.rows.length); var cell = row.insertCell(0); var cell1 = row.insertCell(1); var cell2 = row.insertCell(2); cell.innerText = table.rows[j].cells.item(2).innerText; var formatter = new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR', }); cell1.innerText = formatter.format(table.rows[j].cells.item(10).innerText); var input=document.createElement("input"); input.style.textAlign="center"; input.className="installments"; input.type="number"; input.placeholder = "range (1-12)" $(function() { $('.installments').keyup(function() { const inputVal = parseInt($(this).val()); console.log(inputVal); //shows nothing as I give input if (inputVal <= 0 || inputVal > 12 || parseString(inputVal).includes('.')){ $(this).val()=""; alert("Installments should be within 1-12 months range and should be a whole number"); } }); }); input.style.width="10em"; cell2.appendChild(input); } }En primer lugar, elimine el detector de eventos keyup y el acceso directo para $(document).ready() fuera del bucle. Básicamente, está creando el detector de eventos en cada iteración del bucle for (anidado).
Luego, cuando mueva el detector de eventos fuera del ciclo, use la delegación de eventos para apuntar a los nodos que se agregarán en el futuro. Por ejemplo $(document).on('keyup', '.installments', event => {}) .
Para obtener más información sobre la delegación de eventos en jQuery, consulte aquí