Question

昨天我质疑如何添加新的表行，但更改了重复行的css。我得到了这个问题的答案！（link）但是出现了一个新问题。

我有一张表格如下：

<table class="test">
<thead>
<tr>
    <td><b>header 1</b></td>
    <td><b>header 2</b></td>
    <td><b>header 3</b></td>
    <td><b>header 4</b></td>
</tr>
</thead>
<tbody>
<tr class="1">
    <td>data 1</td>
    <td>data 2</td>
    <td>data 3</td>
    <td class="remove"></td>
</tr>
<tr class="2">
    <td>data 1</td>
    <td>data 2</td>
    <td>data 3</td>
    <td class="remove"></td>
</tr>
<tr class="new">
    <td>data 1</td>
    <td>data 2</td>
    <td>data 3</td>
    <td class="new"></td>
</tr>
</tbody>
<table>

Jquery代码：

$("table.test tr.new:last td.new").click(function(){
     var x = $('table.test tr.new:last').clone(true);
     $(this).removeClass('new').addClass('remove').off('click');    
     x.insertAfter('table.test tr.new:last');
});
     $("table.test tr td.remove").click(function(){
     $(this).closest("tr").fadeOut('slow');
});

当我点击td.new单元格时，我想添加一行。这很有效。此类也在td.remove单元格中更改。但是，单击事件无法正常工作。删除单元格应该总是删除一行。我已经发现我必须使用.off（）和.on函数，但我似乎无法理解这个函数背后的逻辑。以下图片是我的目标：postimage

我现在所拥有的Jsfiddle例子可以找到here

Answer 1

您似乎正在动态地添加行..所以您需要委派活动..

而不是

$("table.test tr td.remove").click(function(){

尝试

$("table.test").on('click','td.remove', function(){

<强> Check Fiddle

<强>更新

您可以在单个处理程序本身处理这两种情况。在您的代码中做了一些修改..

$("table.test").on('click', 'td.remove,td.new', function() {
    var $this = $(this);
    if ($this.hasClass('new')) {
        var x = $('table.test tr.new').clone();
        $this.removeClass('new').addClass('remove');
        $this.closest('tr').removeClass('new');
        x.insertAfter('table.test tr:last');
    }
    else if ($this.hasClass('remove')) {
        $(this).closest("tr").fadeOut('slow');
    }
});

Answer 2

你应该使用jquery .live（），我知道它会被弃用，但对你来说这将是一个简单的起点。 http://api.jquery.com/live/

它将挂钩将来添加到DOM的remove元素。所以你不需要处理任何重新启动和东西。

编辑：

再次回到.live（），因为它已被弃用，你应该通过以下方式实现：

$（document）.on（事件，选择器，数据，处理程序）;

在你的情况下： $（document）.on（'click'，'。remove'，function（）{ //不管你想做什么 }）;

Jquery重复表行和更改事件onclick

2 个答案: