jQuery focusout event on form element is triggered even when child element is clicked

I want to trigger the focusout when the user is not focusing on the ENTIRE form element. But it shouldn't trigger when the user clicks on any of the form's inner elements like in this case the text field or the button. But it's being triggered regardless even though the event is bound to the entire form. How to resolve this?

This happens because you are in-fact not focusing on the form, but rather on one of its child elements (input or button in your case). The focusout (or blur) event will bubble up to the form but is not triggered by it directly.