Bind Jquery event to table rows dynamically added to table

Question

I have a table with a button that adds 5 rows with cells to the table when clicked. I want to bind an event to cells in the 5th column of the table. All of these cells are named "Count_" followed by the row number. So, the cell in Row 0 is:

<td name="CountCell_0">
   <input type="text" name="Count_0">
</td>

And I'm trying to update the input with name Count_X (where X is the row number). The binding works for the cells that existed on the page originally. However, the event is not triggering for cells that were added with the button.

Here is an example of a cell that was dynamically added:

<td>
  <input type="text" name="Count_348">
</td>

Here is my Jquery event:

            $(document).ready(
            function() {   
                $(document).on('change','[name^="Count_"]',function() {
                    console.log('here'); //not triggering on dynamic cell
                    var cell = $(this).attr('name');
                    var idx = cell.split('_')[1];
                    var amount = $(this).val() * $('[name="AvgCost_' + idx + '"]').html();
                    $('#ExtendedCostCell_' + idx).html(amount.toFixed(2));
                });

           }
        );

Answer 1

I moved the function outside of the document ready, and it now triggers on the dynamic rows.

Answer 2

I think the problem was here [name^="Count_"]' you need a selector so change to this input[name^="Count_"]' and the anonimous function is not performed

        $(document).ready(
        (function() {   
            $(document).on('change','input[name^="Count_"]',function() {
                console.log('here'); //not triggering on dynamic cell
                var cell = $(this).attr('name');
                var idx = cell.split('_')[1];
                var amount = $(this).val() * $('[name="AvgCost_' + idx + '"]').html();
                $('#ExtendedCostCell_' + idx).html(amount.toFixed(2));
            });

       }());
    );