I am trying to add a keyup event into my dynamically created input element.

The keyup event doesn't work when I execute the code. Where have I gone wrong?

    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);
        }
  }

CodePudding user response：

First of all - remove the keyup event listener and the shortcut for $(document).ready() outside of the loop. You are basically creating the event listener in every iteration of the (nested) for loop.

Then, when you move the event listener outside of the loop, use event delegation in order to target nodes which will be added in the future. For example $(document).on('keyup', '.installments', event => {}).

For more info regarding event delegation in jQuery, please see here