在 footable 中单击 enter 时显示隐藏的详细信息

Show hidden detail when clicking enter in footable

我正在尝试将一些简单的功能应用于可足迹。我有一个 footable 你可以通过 tab 键浏览行。在每一行,我希望能够单击回车以展开当前选定行的隐藏 content/details,但是我在定位单击功能和添加按键回车时遇到了一些麻烦。

这是我目前添加的一些 jquery,但这不会起作用,因为 HTML 是从 javascript 渲染的,这意味着隐藏的内容不会渲染在我用鼠标点击该行之前:

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

});

根据您的第一个示例,也对 keypress 事件使用委托事件处理程序:

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

只要 .footable table 元素始终存在,事件就会冒泡到那里的事件处理程序。然后将 '> tr' 选择器应用于气泡链中的元素。这意味着该行只需在事件时间匹配。

如果 footable table 本身是动态的,则将祖先上移到更永久的东西。如果没有其他 closer/convenient,则 document 是默认值(切勿将 body 用于委托事件,因为它有一个由样式引起的错误):

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

找出问题所在。

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