Question

我使用jQuery插件'Footable'来构建响应表。通常，当行可以展开和折叠时，此插件会向每行的每个第一列添加一个图标。这很好用，直到我添加了一个事件监听器，它检查在表格中点击的按钮。

在使用Ajax加载数据后，我的表由jQuery组合在一起。我的jQuery看起来像这样：

// My table
var table = $('<table/>', {
    class: 'footable table toggle-circle'
});

// My button, which gets appended to a table cell
removeLink = $('<a/>', {
    'class': 'row-delete',
    'href': '#'
}).text('Remove');

上面的代码构建了一个很好的表格。但是在我将以下事件监听器添加到我的代码中之后（它也能完美地运行），Footable的图标不再出现（扩展和折叠仍然有效）：

// Listen to clicks
$('#response').footable().on('click', '.row-delete', function(e) {
    /* Stuff to do here. It doesn't matter what I put here,
    */ even when it's empty icons are dismissed.
}

表本身就像Ajax调用所提到的那样，在完成时使用以下代码初始化Footable插件：

$(function () {
    $('.footable').footable();
});

我不仅不理解为什么图标丢失，而且我甚至无法理解为什么添加一个事件监听器会让插件输出变得混乱。我错过了什么？

Answer 1

FooTable设置文档网页的方式很难找到并链接到相关代码，所以我会在这里复制（稍加修改）版本：

$('#response').on('click', '.row-delete', function(e) {
    e.preventDefault();

    //get the footable object
    var footable = $('.footable').data('footable');

    //get the row we are wanting to delete
    var row = $(this).parents('tr:first');

    //delete the row
    footable.removeRow(row);
});

在这种情况下，.footer是动态的，因此我们将监听器添加到#response包装器中。

添加事件监听器后，足够的jQuery插件缺少图标

1 个答案: