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?

wouthoekstra
  • 351
  • 4
  • 14

1 Answers1

0

The way FooTable set up their documentation web pages makes it difficult to find and link to the relevant code, so I will copy (a slightly modified) version here:

$('#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);
});

In this case .footer is dynamic so we are adding the listener to the #response wrapper.

Owlvark
  • 1,763
  • 17
  • 28
  • Problem was that '.footable' in my code is loaded by ajax. Because of that, I can't bind the listener directly to '.footable'. Binding it to '#response' (the div the footable gets loaded into) solved that problem. After getting rid of the footable call, like you suggested, the icons returned and the function still worked. I would not know why footable suggests that 'footable()' should be mentioned in the listener... it works fine witouth it. – wouthoekstra Oct 17 '14 at 19:45
  • Yup, that's got it working for me! I accepted the answer :) Do you by any chance know why footable would suggest the footable call in the listener? – wouthoekstra Oct 17 '14 at 19:57