jQuery .on delegation, only direct children in selector

Question

Hello 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.

EDIT: HTML

<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...
}

Answer 2

My suggestion would be to either add an id or class to the child table. This would ensure that it doesn't conflict with any other element on the page or any modification that happens in future. Suppose you add a class nested-table to child table. The code will look like this:

$('table.nested-table tr').dblclick(listenerFunc)

As you have indicated that you reference to table, this should work:

table.on('dblclick', 'tr', listenerFunc)

Answer 3

如果你的第一个<table>本身没有嵌套，你可以提供一个只匹配<tr>元素的选择器，这些元素不是其他<tr>元素的后代：

table.on("dbclick", "tr:not(tr tr)", listenerFunction);

Answer 4

Try

var table = $('#tbl')
table.on("click", "> tbody > tr", listenerFunction);

function listenerFunction(e){
    if(!$(this).children().filter($(e.target).closest('td')).length){
        return;
    }
    console.log('direc tr')
}

Demo: Fiddle

Answer 5

It turns out that this is in part me forgetting to prevent event bubbling and in part a bug/missing feature in jquery 1.7.

The same code in two jsfiddles

• jQuery 1.7.2
• jQuery 1.9.1

In jQuery 1.7.2 passing ">tr" as the selector to .on does not work, I do not know if this is a bug or something that's just not implement in 1.7.2 however the .on method was added in 1.7.

The following code reproduces the error. I've tested this on Chrome running on Mountain Lion and Chrome running on window 7

HMTL:

<table id="outer">
    <tbody>
        <tr id="outer-row">
            <td>Hello</td>
            <td>World</td>
        </tr>
        <tr id="outer-row-1">
            <td>
                <table id="inner">
                    <tbody>
                        <tr id="inner-row">
                            <td>nested
                            </td>
                         </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

JS:

$(function() {
    var handle = function(e) {
        console.dir(this.id);
    };


    $("#outer").children("tbody").on("dblclick", ">tr", handle);
    $("#inner").children("tbody").on("dblclick", ">tr", handle);
});