Question

Can someone help me with this code:

var rows = $(".delete"); //rows to delete
var irows = $(".insert");//rows to insert
//delete row
$.each(rows, function(i ,v) {
    $(v).click(function() {
        $(this).closest("tr").fadeOut(300, function() { $(this).remove(); });               
    });
});

//insert row before
$.each(irows, function(i, v) {
    $(v).click(function() {
        var irowIndex = $(this).closest("tr").index();
        var newRow = "<tr class=\"dataRow\">" + "
                    "<td><input type=\"button\" value=\"&#8597\" class=\"drag\" /><input type=\"button\" value=\"&#187;\" class=\"insert\" /><input type=\"button\" value=\"x\" class=\"delete\" /></td><td><input type='hidden' name='records_id[]' /><input style=\"text-align: center\" type='text' class='itemno' name='existing_itemno[]' size='5' /></td>" +
                    "<td>&nbsp;</td>" +
                    "<td>&nbsp;</td>" +
                    "<td>&nbsp;</td></tr>";
        $("#tbox tr:eq(" + irowIndex + ")").before(newRow);
    });
});

<table id="#tbox">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

Adding and deleting row works, but the button in the added rows that triggers the delete/insert does not work. I mean if you add a row and you click delete button on that row, it won’t work. I’ve already searched the web, and I found bind(), live(), and delegate. The problem is how I can use it inside .each. Or is there a better approach than this? Please help.

Answer 1

You could get rid of your each and do something like –

$('.delete').live('click',function() {
   $(this).closest("tr").fadeOut(300, function() { $(this).remove(); }); 
})

That should add the click handler to all the .delete buttons on the page, including those that get generated dynamically.