Question

我已创建动态添加＆amp;删除html中的行。添加行是有效的，但删除不起作用。甚至没有错误生成。也在jsfiddle上测试过。请参阅以下链接以获取代码：http://jsfiddle.net/znFmc/2/ 提前谢谢。

<body>

    <div id="page_container">

        <div class="form_container">

            <h3>Add and Delete rows dynamically with textboxes using jQuery:</h3>

            <table id="expense_table" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th>Sl. No</th>
                        <th>Month</th>


                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" name="reg_no_01" maxlength="10" required /></td>
                        <td><input type="text" name="subjects_01" maxlength="10" required /></td>

                        <td>&nbsp;</td>
                    </tr>
                </tbody>
            </table>

            <input type="button" value="Add Row" id="add_ExpenseRow" />

        </div> <!-- END subject_marks -->
        <div class="clearfix"></div>

    </div>

    <!-- FOOTER -->
    <a class="mm" href="http://mediamilan.com/" title="Go to Media Milan.com" target="_blank"></a>
    <footer> <p>Developed by : Miteshan Patel</p>   </footer>

</body>

jquery

$(function(){
    // GET ID OF last row and increment it by one
    var $lastChar =1, $newRow;
    $get_lastID = function(){
        var $id = $('#expense_table tr:last-child td:first-child input').attr("name");
        $lastChar = parseInt($id.substr($id.length - 2), 10);
        console.log('GET id: ' + $lastChar + ' | $id :'+$id);
        $lastChar = $lastChar + 1;
        $newRow = "<tr> \
                    <td><input type='text' name='reg_no_0"+$lastChar+"' maxlength='10' /></td> \
                    <td><input type='text' name='subjects_0"+$lastChar+"' maxlength='10' /></td> \
                    <td><input type='button' value='Delete' class='del_ExpenseRow' /></td> \
                </tr>"
        return $newRow;
    }

    // ***** -- START ADDING NEW ROWS
    $('#add_ExpenseRow').on("click", function(){ 
        if($lastChar <= 9){
            $get_lastID();
            $('#expense_table tbody').append($newRow);
        } else {
            alert("Reached Maximum Rows!");
        };
    });

    $(".del_ExpenseRow").on("click", function(){ 
        $(this).closest('tr').remove();
        $lastChar = $lastChar-2;
    }); 
});

Answer 1

修正：http://jsfiddle.net/znFmc/4/

$(document).on("click", ".del_ExpenseRow", function(){ 
        $(this).closest('tr').remove();
        $lastChar = $lastChar-2;
});

了解.on()的工作原理。您应该将事件绑定到不会动态添加的元素

Answer 2

您的javascript运行并将单击处理程序应用于它找到的每个“删除”按钮。起初没有删除按钮，因此没有附加处理程序。

当您添加删除按钮时，添加处理程序的脚本已经运行。新按钮没有附加处理程序。

您应该将Delete处理程序附加到表并委派处理程序。这将有效地将其附加到任何添加的删除按钮。

$("#expense_table").on("click",'.del_ExpenseRow' function(){ 
    $(this).closest('tr').remove();
    $lastChar = $lastChar-2;
});

动态删除行不起作用

2 个答案: