Javascript added rows not responding to click events

Question

I have a form I've been working on that dynamically adds and deletes table rows using javascript. I am also trying to number each of the rows and the text boxes of each row. Lets say I have four rows that I've added. If I delete row number 3, the remaining rows are labelled 1, 2, 4. My jquery should renumber the rows, 1, 2, 3. My code is posted below. I have a hunch that the rows aren't being recognized once they're added. Can anyone help me out with this?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    function deleteRow(row) {
        var x = document.getElementById('bom_table');
        if (x.rows.length > 4) {
            var i = row.parentNode.parentNode.rowIndex;
            document.getElementById('bom_table').deleteRow(i);

        }
    }


    function insRow() {

        var x = document.getElementById('bom_table');
        var len = x.rows.length;
        // deep clone the targeted row
        var new_row = x.rows[len - 2].cloneNode(true);
        // get the total number of rows

        // set the innerHTML of the first row 
        //            new_row.cells[0].innerHTML = len - 2;


        // grab the input from the first cell and update its ID and value
        var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
        inp1.id += len;
        inp1.value = '';

        // grab the input from the first cell and update its ID and value
        var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
        inp2.id += len;
        inp2.value = '';

        // grab the input from the first cell and update its ID and value
        var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
        inp3.id += len;
        inp3.value = '';

        // grab the input from the first cell and update its ID and value
        var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
        inp4.id += len;
        inp4.value = '';

        // grab the input from the first cell and update its ID and value
        var inp5 = new_row.cells[5].getElementsByTagName('input')[0];
        inp5.id += len;
        inp5.value = '';

        // append the new row to the table
        var tbody = document.getElementById('bom_table').getElementsByTagName("tbody")[0];
        tbody.appendChild(new_row);


    }

    function deleteRow2(row) {
        var x = document.getElementById('ro_table');
        if (x.rows.length > 4) {
            var i = row.parentNode.parentNode.rowIndex;
            document.getElementById('ro_table').deleteRow(i);
        }

    }

    function insRow2() {

        var x = document.getElementById('ro_table');
        var len = x.rows.length;
        // deep clone the targeted row
        var new_row = x.rows[len - 2].cloneNode(true);
        // get the total number of rows

        // set the innerHTML of the first row 
        //            new_row.cells[0].innerHTML = len - 2;

        //          if (len = 3)
        //              new_row = x.rows[2].cloneNode(true);
        //          else
        //              ;

        // grab the input from the first cell and update its ID and value
        var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
        inp1.id += len;
        inp1.value = '';

        // grab the input from the first cell and update its ID and value
        var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
        inp2.id += len;
        inp2.value = '';

        // grab the input from the first cell and update its ID and value
        var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
        inp3.id += len;
        inp3.value = '';

        // grab the input from the first cell and update its ID and value
        var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
        inp4.id += len;
        inp4.value = '';

        // grab the input from the first cell and update its ID and value
        var inp5 = new_row.cells[5].getElementsByTagName('input')[0];
        inp5.id += len;
        inp5.value = '';


        // append the new row to the table
        var tbody = document.getElementById('ro_table').getElementsByTagName("tbody")[0];
        tbody.appendChild(new_row);
        //            x.appendChild(new_row);



    }




</script>
<script type="text/javascript">
    $(document).ready(function () {
        var i = 0
        var j = 1
        var k = 1
        $('input').each(function (i) {

            $(this).attr("id", "text_" + i++);

        })
        $('.bom_rowcount').each(function (j) {
            $(this).attr("innerHTML", 1 + j++);

        })
        $('.ro_rowcount').each(function (k) {
            $(this).attr("innerHTML", 1 + k++);

        })
        $(".remove").click(removefunction());

        function removefunction() {
            $('input').each(function (i) {

                $(this).attr("id", "text_" + i++);
            })
            $('.bom_rowcount').each(function (j) {
                $(this).attr("innerHTML", 1 + j++);

            })
            $('.ro_rowcount').each(function (k) {

                $(this).attr("innerHTML", 1 + k++);

            })
        };


        $(".add").click(function () {
            $('input').each(function (i) {
                $(this).attr("id", "text_" + i++);
            })
            $('.bom_rowcount').each(function (j) {
                $(this).attr("innerHTML", 1 + j++);
            })
            $('.ro_rowcount').each(function (k) {
                $(this).attr("innerHTML", 1 + k++);
            })


        });




    });
</script>

Answer 1

Your code is written such that it adds event handlers to the nodes that exist just after the page has gone ready.

This does not include any nodes that you subsequently add.

What you need to do is set up event delegation using on. Event delegation places the handler on the document and then inspects every event that bubbles up to see if its target matches your selector.

Read the docs and have a crack at it. If you still can't resolve your problem, you can either update this question (probably not the right thing to do) or ask another SO question, explaining what you tried and what's not working.