Question

I have a function that copies values from a table1 to a table2. The function checks the second table to make sure there are enough rows before it performs the copy, and if there are not enough rows it creates them with addRows(n).

$('#copyTableValues').on('click', function() {
    // count available rows and add more if needed
    if(table2Rows < rowsNeeded)
    {
        addRows(rowsNeeded - table2Rows);
    }

    // copy values from table1 to table2
    // ....

});

However the function does not recognize the rows that were most recently inserted with addRows. If I click the copy function again, it recognizes them.

My understanding is that this is because jquery checks for changes to the DOM only during the .on('click') part of this function. Is there a way to ask it to check again in the cases where I make additions to the DOM after the click?

Answer 1

Yes you need to move up a little in your hierarchy though.

Try:

$('body').on('click', '#copyTableValues', function() {

});

This will watch 'body' for any additions of '#copyTableValues', and apply the event to them as well. The way you have only addresses pieces that are already loaded into the DOM when the script hits those lines.