Jquery ON CLICK two elements

Question

I've got a table with data and to edit its fields I use this function

var tabM =  $('table#trips_info');
 $('tr',tabM).dblclick(function(){
            var tr_HL = $(this);

            tr_HL.addClass('highLight_edit');
            $('td',tr_HL).each(function(){
               $(this).attr('contenteditable','true');
            });

            var sibls = tr_HL.siblings('tr');

           $('html, '+ sibls +'' ).on('click',function(){
               console.log(tr_HL.text());
                tr_HL.removeClass('highLight_edit');
            });

            event.stopPropagation();
        });

especially this part is used to quit editing the current, but I cant make it work properly

 $('html, '+ sibls +'' ).on('click',function(){
                   console.log(tr_HL.text());
                    tr_HL.removeClass('highLight_edit');
                });

I want the function to quit editing when user clicks NOT THE current tr but siblings tr or outside the tr an table area

Thx in advance

Answer 1

Use blur, from the docs:

The blur event is sent to an element when it loses focus.

$(document).on('blur', 'td.highlight_edit', function(){
    $(this).parent().removeClass("highlight_edit")
})