Javascript 添加的行不响应点击事件

Question

我有一个一直在开发的表单，它使用 JavaScript 动态添加和删除表行。我还尝试对每一行和每行的文本框进行编号。假设我添加了四行。如果我删除第 3 行，则剩余的行将标记为 1, 2, 4。我的 jquery 应该对行重新编号，1,2,3。我的代码发布在下面。我有预感，这些行一旦添加就不会被识别。谁能帮我解决这个问题吗？

<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

您的代码编写为将事件处理程序添加到页面准备就绪后立即存在的节点。

这不包括您随后添加的任何节点。

您需要做的是使用 on 设置事件委托(delegate)。事件委托(delegate)将处理程序放置在文档上，然后检查冒泡的每个事件以查看其目标是否与您的选择器匹配。

阅读文档并尝试一下。如果您仍然无法解决问题，您可以更新此问题(可能不是正确的做法)或提出另一个问题，解释您尝试过的内容以及不起作用的内容。