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设置事件委派。事件委托将处理程序放在文档上，然后检查每个冒泡的事件，以查看其目标是否与您的选择器匹配。

阅读文档并对其进行修改。如果你仍然无法解决问题，你可以更新这个问题（可能不是正确的事情）或者提出另一个问题，解释你尝试过的和不起作用的东西。