jQuery focusout event doesn't trigger on table element

Question

I'm trying to make a table support multiple row selection (for the moment just the CTRL + mouseclick combination). Everything works fine, but when I click outside the table area, the rows don't deselect. Unfortunately, I have found out that the focusout event doesn't trigger at all. Here's my code:

$(".library tbody tr").live('click', function (event) {
    event.preventDefault();

    if (event.ctrlKey) {
        $(this).toggleClass('selected-row');
    } else {
        $(".library tbody tr").removeClass("selected-row");
        $(this).addClass("selected-row");
    }
});

$("table.library").live('click', function () {
    $(".library").addClass("focused");
});

$("table.library").live('focusout', function () {
    $(this).removeClass("focused");
});

Has anyone else dealt with this issue?

The accepted answer applies to your question as well. http://stackoverflow.com/questions/8410587/jquery-focus-out-on-tr — Joonas, Apr 16 '12 at 09:28

score 1 · Answer 1 · answered Jan 01 '13 at 08:42

1

Table element can also get focus if you use tabindex for table body or table element as

$('#tableId tbody').attr("tabindex", 1);

After this when you click on table it will get focus.

answered Jan 01 '13 at 08:42

Avinash

173
1
4
17

score 0 · Accepted Answer · answered Apr 16 '12 at 09:35

The 'focusout' event only fires when focus leaves elements which can be focused in the first place, such as input elements. A table element can't get that focus, as far as I know. You'd need to handle the deselection of selected rows in some other way, Lollero mentoned one possible solution in his comment on your question.

jQuery focusout event doesn't trigger on table element

2 Answers2

Linked