Show hidden detail when clicking enter in footable

Question

I am trying to apply some simple functionality to a footable. I have a footable were you can tab through the rows. At each row I wish to be able to click enter to expand hidden content/details for the current selected row, but I am having some trouble locating the click function and adding keypress enter.

This is currently some jquery that i have added, but this won't work simply because the HTML is render from javascript, meaning that the hidden content is not render before i click on the row with the mouse:

$("tbody").delegate("*", "focus blur", function () {
    var elem = $(this);
    setTimeout(function () {
        elem.toggleClass("focused", elem.is(":focus"));
    }, 0);
});

$('.footable > tbody  > tr').keypress(function (e) {

    if ($(this).hasClass("focused") && e.which == '13') {
        //alert('test');
        $('.footable-row-detail').css({ "display": "table-row" });
    }

});

Answer 1

As per your first example, use a delegated event handler for the keypress event too:

$('.footable > tbody').on('keypress', '> tr', function (e) {
    if ($(this).hasClass("focused") && e.which == '13') {
        //alert('test');
        $('.footable-row-detail').css({ "display": "table-row" });
    }
});

So long as the .footable table element exists always, the events bubble up to the event handler there. Then the '> tr' selector is applied to the element in the bubble-chain. That means the row only has to match at event time.

If the footable table itself is dynamic, move up the ancestors to something more permanent. document is the default if nothing else is closer/convenient (never use body for delegated events as it has a bug caused by styling):

$(document).on('keypress', '.footable > tbody > tr', function (e) {
    if ($(this).hasClass("focused") && e.which == '13') {
        //alert('test');
        $('.footable-row-detail').css({ "display": "table-row" });
    }
});

Answer 2

Found out what the problem was.

$table.find(opt.toggleSelector).unbind('keypress').keypress(function (e) {
            if ($(this).hasClass('focused') && e.which == 13) {
                //alert('You pressed enter!');
                $(this).trigger(trg.toggleRow);
            } 
        });