jQuery .on delegation, only direct children in selector

Question

I am trying to use .on to bind an event only to direct children of an element.

The dom looks like this:

table > tbody > tr+ > td > table > tbody > tr+

So far I have tried:

• table.find(">tbody").on("dbclick", ">tr", listenerFunction);
• table.on("dbclick", "> tbody > tr", listenerFunction);

None of these works as expected and using table.on("dbclick", "tr", listenerFunction) collides with the nested table causing double triggers and the likes because both tables have this listener.

Any ideas most appreciated.

<table>
  <tbody>
   <tr><!--Selectable row, adds the row after with sub table --></tr>
    <tr>
      <td>
        <table>
          <tbody>
            <tr></tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

In your listener function use event.stopPropagation to stop the event bubbling back up to a parent tr.

function listenerFunc(e) {
    e.stopPropagation();

    // Do your thing...
}