0

簡単な機能をフッタブルに適用しようとしています。行をタブで移動できるフッタブルがあります。各行でエンターをクリックして、現在選択されている行の非表示のコンテンツ/詳細を展開できるようにしたいのですが、クリック機能を見つけてキープレスエンターを追加するのに苦労しています。

これは現在私が追加したいくつかの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" });
    }

});
4

2 に答える 2

0

最初の例のように、イベントにも委任されたイベント ハンドラーを使用し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" });
    }
});
于 2015-02-03T15:46:45.767 に答える
0

問題が何であるかを発見しました。

$table.find(opt.toggleSelector).unbind('keypress').keypress(function (e) {
            if ($(this).hasClass('focused') && e.which == 13) {
                //alert('You pressed enter!');
                $(this).trigger(trg.toggleRow);
            } 
        });
于 2015-02-06T09:46:48.720 に答える