child event trigger only after exiting parent element
<p>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:</p>

<pre><code>&lt;div id="form"&gt;
  &lt;div id="dateTime"&gt;
    &lt;input id="date"&gt;
    &lt;input id="time"&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>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. </p>

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

<p>Is the problem with my approach in the HTML structure or use of JQuery? </p>