1

I use the jQuery plugin 'Footable' to build a responsive table. Normally this plugin adds an icon to every first column of every row, when the row can expand and collapse. This worked fine, untill I added an event listener that checks for a button to be clicked inside the table.

My table is put together by jQuery after data is loaded with Ajax. My jQuery looks like this:

// 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');

The code above builds me a nice table. But after I add the following event listener to my code (which works perfectly fine as well), Footable's icons no longer appear (expanding and collapsing still works): 

// 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.
}

The table itself is as mentioned loaded by an Ajax call, which on completion initializes the Footable plugin with the following code:

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

Not only don't I understand why the icons are missing, but I cannot even understand why adding an event listener messes with the plugins output to begin with. What do I miss?

4

1 回答 1

0

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包装器中。

于 2014-10-17T19:26:43.043 回答