I have an (obviously simplified) form structure like so:

```
 <form class = 'crud'>
  <div class = 'record' id='record_0'>
    <input id='testa_0' name='testa' class = 'crud-control'>
    <input id='testb_0' name='testb' class = 'crud-control'>
  </div>
  <div class = 'record' id='record_1'>
    <input id='testa_1' name='testa' class = 'crud-control'>
    <input id='testb_1' name='testb' class = 'crud-control'>
  </div>
  <div class = 'record' id='record_2'>
    <input id='testa_2' name='testa' class = 'crud-control'>
    <input id='testb_2' name='testb' class = 'crud-control'>
  </div>
</form>

```

I would like to trigger an event (for data submission), when the user moves from an input element within one record to another record (actually clicks/moves outside the current record), but **not** when the user moves from one input to another input that's a descendant of the same `div.record`.

I have tried to attach a `.focusout()` event handler to `div.record`, but that fires also, when moving from input to another input 'within' the same record -- I suppose that's normal behavior due to bubbling.

Any suggestions, on how to proceed?