child event trigger only after exiting parent element

Question

I have two child inputs within a parent div. I'd like to trigger an event once the user exits the parent element, but not when the user moves from one child directly to the other. In this example I am asking the user to enter the date and time in separate inputs:

<div id="form">
  <div id="dateTime">
    <input id="date">
    <input id="time">
  </div>
</div>

I have tried using '.focusout' and '.blur' as follows with no success - by that I mean the event is triggered as the user tabs from "date" to "time" instead of waiting until the user tabs out of "time" and exits the parent "dateTime" div altogether.

$("#form").on('focusout', '#dateTime', function() {
  alert ('User has exited the "dateTime" div.');
});
$("#form").on('blur', '#dateTime', function() {
  alert ('User has exited the "dateTime" div.');
});

Is the problem with my approach in the HTML structure or use of JQuery?

Thanks. Robust discussion there helped me understand the usefulness and limits of propagation. — runner, May 18 '16 at 09:35
That it is always 'bottom-up' made me change my approach to simply test whether the input element are empty before triggering the next function. Cheers — runner, May 18 '16 at 09:39

score 0 · Answer 1 · answered May 17 '16 at 20:51

0

I didn't try this yet but I think this should work

$("#dateTime").focusout(function() {
  if ($(this).has(document.activeElement).length === 0) {
    alert('User has exited the "dateTime" div.');
  }
});

answered May 17 '16 at 20:51

agDev

855
10
20

child event trigger only after exiting parent element

1 Answers1