0

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

我有一张如下表：

<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 示例可以在这里找到

4

2 回答 2

1

您似乎动态地添加了行。所以您需要委托事件..

代替

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

尝试

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

检查小提琴

更新

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

$("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');
    }
});​
于 2012-11-30T20:40:48.093 回答
0

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

它将挂钩将来将添加到 DOM 的删除元素。所以你不需要处理任何重新初始化和东西。

编辑：

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

$(document).on(事件、选择器、数据、处理程序);

在你的情况下： $(document).on('click', '.remove', function(){ //不管你想做什么 });

于 2012-11-30T20:33:15.647 回答