在脚下单击回车时显示隐藏的细节

Show hidden detail when clicking enter in footable

本文关键字：隐藏 细节 显示 脚下 单击 回车      更新时间：2023-09-26

我正在尝试将一些简单的功能应用于脚。我有一个脚，你可以通过行。在每一行，我希望能够单击 Enter 以展开当前选定行的隐藏内容/详细信息，但我在找到单击功能和添加按键输入时遇到了一些问题。

这是目前我添加的一些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 表元素始终存在，事件就会冒泡到那里的事件处理程序。然后将'> tr'选择器应用于气泡链中的元素。这意味着该行只需要在事件时匹配。

如果footable表本身是动态的，请将祖先向上移动到更永久的位置。 如果没有其他更近/更方便的东西，则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);
            } 
        });
相关文章：