Question

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

事实上，创作的功能很好，也可以删除，但它只适用于第一行。

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

这是我的代码：

<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>

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

非常感谢任何形式的帮助。

Answer 1

原因是您只在document.ready上安装了点击侦听器，因此稍后创建的点击侦听器没有点击侦听器。

尝试事件委托：

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

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

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

1 个答案: