Live search not working on appended rows of table

Question

I have a table defined that has one pre-defined row and new rows can be created on clicking a button that calls this function:

function newProduct()
{

var table=  document.getElementById("producttable");
//var table = trow.parentNode;
var clone = table.insertRow(-1); 
clone.insertCell(0);
clone.insertCell(1);
clone.insertCell(2);
clone.insertCell(3);
clone.insertCell(4);
clone.insertCell(5);
clone.insertCell(6);
clone.insertCell(7);
clone.insertCell(8);
clone.cells[0].innerHTML='<input type="text" class="form-control" name="psku[]" value="0"  />'
clone.cells[1].innerHTML='<input type="text" class="form-control" name="pname[]" value="" /><div class="result"></div>';
clone.cells[2].innerHTML='<input type="number" class="form-control" name="pqty[]" value="0"  onkeyup="calcCost(this);" />';
clone.cells[3].innerHTML='<input type="number" class="form-control" name="pcp[]" value="0" onkeyup="calcCost(this);" />';
clone.cells[4].innerHTML='<input type="number" class="form-control" name="ptp[]" value="0"  />';
clone.cells[5].innerHTML='<input type="number" class="form-control" name="ptax[]" value="0"  onkeyup="calcCost(this);" />';
clone.cells[6].innerHTML='<input type="number" class="form-control" name="pdisc[]" value="0"  onkeyup="calcCost(this);" />';
clone.cells[7].innerHTML='<input type="number" class="form-control" name="pfp[]" value="0" />';
clone.cells[8].innerHTML='<input type="checkbox"/>';
table.appendChild(clone);   
}

Now I want to conduct a live search on product name for which I am using JQuery. This is the snippet that performs the search.

$(document).ready(function()
{
$('#producttable tr').each(function(){
    $("td").eq(1).find(":input").on("keyup input", function()
    {
    var prodname = $(this).val();
    var resultDropdown = $(this).siblings(".result");
    if(prodname.length)
    {
        //get input value on change
        //document.write(prodname);
        $.get("product-search.php", {term: prodname},function(data)
        {
            // Display the returned data in browser
            //document.write(resultDropdown.className);
            if(data== "null")
                resultDropdown.empty();
            else
                resultDropdown.html(data);
        });
    } 
    else
        resultDropdown.empty();

    });

This query works fine for the forst pre-defined row, ie, if i type something on product name field, it gives a corresponding list of suggestions. But it does not work for the new rows that are appended. How can I access the product name cell of the table using JQuery?

Answer 1

$(document).ready(function() {
  $('#producttable').on('keyup input', 'tr td input', function(){
    var prodname = $(this).val();
    var resultDropdown = $(this).siblings(".result");

    if(prodname.length) {
      //get input value on change
      //document.write(prodname);
      $.get("product-search.php", {term: prodname},function(data){
        // Display the returned data in browser
        //document.write(resultDropdown.className);
        if(data== "null")
            resultDropdown.empty();
        } else {
            resultDropdown.html(data);
        }
      });
    } else {
      resultDropdown.empty();
    }
  });
});

Hopefully this works, since #producttable always exists, then you just need to put a click handler on it, and the 'tr td input' will make sure the code will only run when an input is clicked, now you don't need to manually add event handlers each time you add a new row