jqueryappendfocuslostfocus

Jquery appendTo without losing focus


I want to move an li element inside previous sibiling li when tab key is pressed keeping focus on it. But when I am moving, it is losing focus and executing focusout on the element.

    .bind("keydown", function(e) {
        var keyCode = e.keyCode || e.which; 

        if (keyCode == 9) {
            e.preventDefault();
            console.log('Tab pressed: moving it');
            $(this).appendTo($(this).prev());

            return false; // ignore default event
        }})
       .focusout(function(e) {
        e.stopPropagation();

        console.log('focusout');
        if(isEmpty($(this)) && $(this).siblings().size() != 0)
        {
            $(this).remove();
        }
        return false;
    })

Please suggest some solution to move element without losing focus.


Solution

  • There is not jquery method to do it as I could find. Its to be done manually as mentioned by https://stackoverflow.com/users/1175966/charlietfl in comments.

    Unbind focusout -> append -> trigger focus -> bind focusout
    

    Unbind is to be done because in my code I am removing the element on which has already been appended elsewhere, so javascript was breaking.