Question

i have table with 4 rows and when i click on any row then a new is getting added just after row where i clicked. here i am giving my code just to show how i achieve it with jquery.

my jquery by which i adding a new row just after the row where i clicked.

$(document).ready(function () {
        $("table#Table1 tr").click(function () {
            var $tr = $(this).closest('tr');
            var myRow = ($tr.index() + (++counter));
            $(this).after("<tr ><td>" + myRow + ")&nbsp;</td><td><img src='Images/closelabel.png' id='imgExpandCollapse' alt='ABC' style='cursor:pointer'/></td><td>Name : New one</td><td>Desig : CEO</td></tr>");

        });

});

the problem is that i am adding new row with jquery but click event is not getting attach with new. so please guide me for the best approach to attach click event with new row.

Answer 1

You want to use .live(..) to bind the event. This will allow dynamically generated DOM elements to use the same event.

$("table#Table1 tr").live( 'click', function () {
            var $tr = $(this).closest('tr');
            var myRow = ($tr.index() + (++counter));
            $(this).after("<tr ><td>" + myRow + ")&nbsp;</td><td><img src='Images/closelabel.png' id='imgExpandCollapse' alt='ABC' style='cursor:pointer'/></td><td>Name : New one</td><td>Desig : CEO</td></tr>");

        });