I have a table that loads just fine.  Each row has an ID matching the database.  The last row in the table is there to insert a new row.  When the user clicks the Add button the data is added to the database and the row is displayed in the table.  Each row in the table contains a button for deleting that row.  Here is the button markup:

1. <button class="btn btn-default delete-increment" aria-label="Delete" data-id="1">
2. <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
3. <span class="sr-only">Delete</span>
4. </button>

There is a jQuery function which detects a click of this button by the class name delete-increment.  It then deletes the item from the database and the table.  The delete buttons work fine when the table is initially populated.  However, when a new row is added and you click the delete button for that row it does not trigger the function.  I did confirm that after adding a new row all the other delete buttons still work.  The issue appear to be with just new rows added after the page load.

1. $('[class~=delete-increment').click(function () {
2. ...
3. });

Here is the code used to insert the new row:

1. $('#my-table tr:last').prev().after('<tr id="LayoutContent_increment-' + data.d + '"><td>$' + Start + '</td><td>$' + End + '</td><td>$' + Increment + '</td><td class="action" style="text-align: center"><button class="btn btn-default delete-increment" aria-label="Delete" data-id="' + data.d + '"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span><span class="sr-only">Delete</span></button></td></tr>');

Anyone know why only the new rows added do not trigger the click function?