复制和删除表行时出现问题答案

【问题标题】：Trouble while duplicating and removing table rows复制和删除表行时出现问题
【发布时间】：2014-03-12 01:44:44
【问题描述】：

我在创建和删除动态表行时遇到了一些麻烦。

其实创建功能很好用，删除也可以，但是只对第一行有效。

我已经做了一些研究，我认为这可能是因为当文档准备好时重复的行不存在。

这是我的代码：

<script type="text/javascript">
    $(document).ready(function(){
        $('.add_row').click(function(){
            var $tr    = $(this).closest('.tr_clone');
            var $clone = $tr.clone();
            $clone.find(':text').val('');
            $tr.after($clone);   ;
        });
        $('.remove_row').click(function(){
            var $that = $(this);
            var whichtr = $(this).closest("tr");
            var $table = $that.parents('table:first');
            alert($that.parents('tr:first').length);
            if ($('tr', $table).length > 1) {
                //on supprime
                whichtr.remove()  
            }else{
                //on fait rien
                alert('Vous ne pouvez pas supprimer la première ligne');
            }
        });
    })
</script>

对于第一行，我可以添加和删除行，但是对于重复的行，当我单击它们的按钮以删除和复制行时，没有任何效果。

这是我的桌子：

<tr class="tr_clone">
    <td style="text-align:center"><input type="text" style="width:200px" name="facture[][libelle]"><br></td>
    <td style="text-align:center"><input type="text" style="width:75px" name="facture[][quantite]"><br></td>
    <td style="text-align:center"><input type="text" style="width:100px" name="facture[][prix_unitaire]" ><br></td>
    <td style="text-align:center"><input type="text" style="width:100px" name="facture[][taxes]"><br></td>
    <td style="text-align:right">&nbsp;0,00 € <input type="hidden" name="facture[][prix]"></td>
    <td style="text-align:center"><img src="images/add.png" class="add_row"> <img src="images/remove.png" id="do_not_remove" class="remove_row"></td>
</tr>

我不想删除最后一行，我的意思是如果只有一个，我们不应该删除。

我们将不胜感激任何形式的帮助。

【问题讨论】：

标签： jquery html-table duplicates row

【解决方案1】：

原因是你只在document.ready上安装了点击监听，所以后面创建的没有点击监听。

尝试事件委托：

$("body").on("click", '.add_row', function(){

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。 jQuery 将事件从事件目标冒泡到附加处理程序的元素（即从最里面到最外面的元素），并为沿着该路径匹配选择器的任何元素运行处理程序。 http://api.jquery.com/on/

【讨论】：