[SOLVED] jQuery focusout for entire div and children

jQuery focusout for entire div and children

I have a div that I am creating dynamically via jQuery with some links/buttons in it. When this div loses focus I need to remove it. This part I can do ok.

However, right now I have the focusout event on the wrapper for the div and when I click on a button inside the div, the wrapper loses focus to the child and my event gets fired. Checking if the element clicked is a child of the wrapper I can do, but since the wrapper no longer has focus, my event will not fire again to remove the div.

I have also tried .blur, but this doesn't work any better.

What is the best way to do this?

Solution

$("#yourDiv").focusout(function () {
   if ($(this).has(document.activeElement).length == 0) {
       // remove div
   }
});

$(this) = the div you're focusing out of.

document.activeElement = the element that is currently in focus.

$(this).has(document.activeElement) is simply checking if the active element is a child of your div