Question

I have two tables [Source: table1, Destination:table2] with 3 columns each (checkbox, value1, value2).
On selecting a checkbox in table1, jquery should copy that particular row and append it to table2 while deleting it from table1 at the same time. This action should also work from table2 to table1. I wrote a script but its not working. It is copying and deleting from table1 and appending to table2 but when I select a checkbox from the newly dynamically added table2 row, somehow it is not getting appended to table1.

    <script>
    $(document).ready(function() {
        $("#table1 tr input:checkbox").click(function() {
            $('#table2').append('<tr><td><input type="checkbox" name="'+$(this).attr("name")+'" value="'+$(this).val()+'"></td><td>'+$(this).attr("name")+'</td><td>'+$(this).val()+'</td></tr>');
            $(this).parent().parent().remove();
        });         

        $("#table2 tr input:checkbox").click(function() {
            $('#table1').append('<tr><td><input type="checkbox" name="'+$(this).attr("name")+'" value="'+$(this).val()+'"></td><td>'+$(this).attr("name")+'</td><td>'+$(this).val()+'</td></tr>');
            $(this).parent().parent().remove();
        }); 
    });
    </script>

Am I missing anything? How do I fix this thing?

Answer 1

use live insted of click

<script>
$(document).ready(function() {
    $("#table1 tr input:checkbox").live('click',function() {
        $('#table2').append('<tr><td><input type="checkbox" name="'+$(this).attr("name")+'" value="'+$(this).val()+'"></td><td>'+$(this).attr("name")+'</td><td>'+$(this).val()+'</td></tr>');
        $(this).parent().parent().remove();
    });         

    $("#table2 tr input:checkbox").live('click',function() {
        $('#table1').append('<tr><td><input type="checkbox" name="'+$(this).attr("name")+'" value="'+$(this).val()+'"></td><td>'+$(this).attr("name")+'</td><td>'+$(this).val()+'</td></tr>');
        $(this).parent().parent().remove();
    }); 
});
</script>