Listening to Added Table Rows

Question

Let's say I have a table:

<table>
    <tr></tr>
</table>

$(function(){

    $('#btn').click(function(){
         $('table').append('<tr><input class="remove" value="remove"></tr>');
    });

    $('.remove').on('click', function(){

         $(this).parent().remove();
   });

});

Is there a way to link a custom event handler that fires whenever a row is added or removed using jQuery?

thank

Answer 1

Yes, you can bind the comtom event.

$('#table_id').bind('rowAddOrRemove', function(event){
    //do what you want.
});

And when you add or delete a row, you must fire the event.

$('#table_id').trigger('rowAddOrRemove');

Answer 2

Why don't you call the method when deleting rows? Say you have a function to delete a row. In this function, just call the method that you would use for your listener. Same thing with adding strings.

$(function(){

    $('#btn').click(function(){
        $('table').append('<tr></tr>');
        // insert your method here...
    });

});