Question

您好我正在尝试使用.on将事件绑定到元素的直接子节点。

dom看起来像这样

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

到目前为止，我已经尝试了

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

这些都没有按预期工作，并且使用table.on("dbclick", "tr", listenerFunction)与嵌套表冲突导致双触发器等，因为两个表都有此侦听器。

任何想法最受赞赏。

编辑：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

在您的侦听器功能中，使用event.stopPropagation停止事件冒泡回到父tr。

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

    // Do your thing...
}

Answer 2

我的建议是在子表中添加id或class。这将确保它不会与页面上的任何其他元素或将来发生的任何修改冲突。假设您向子表添加了一个类nested-table。代码如下所示：

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

正如您已表明您引用表格一样，这应该有效：

table.on（'dblclick'，'tr'，listenerFunc）

Answer 3

如果您的第一个<table>未嵌套，则可以提供仅匹配不是其他<tr>元素后代的<tr>个元素的选择器：

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

Answer 4

尝试

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')
}

演示：Fiddle

Answer 5

事实证明，这部分是我忘记防止事件冒泡，部分是jquery 1.7中的错误/缺失功能。

两个jsfiddles中的相同代码

在jQuery 1.7.2中传递“＆gt; tr”作为.on的选择器不起作用，我不知道这是一个bug还是在1.7.2中没有实现的东西但是{{{ 1}}方法在1.7中添加。

以下代码重现错误。我在Mountain Lion上运行的Chrome和在Windows 7上运行的Chrome上进行了测试

HMTL：

.on

JS：

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

jQuery .on委托，只指导选择器中的子节点

5 个答案: