4

我正在尝试使用.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)与嵌套表冲突导致双重触发器等，因为两个表都有这个监听器。

任何想法最受赞赏。

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

5 回答 5

6

在您的侦听器函数event.stopPropagation中，用于停止事件冒泡返回到 parent tr。

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

    // Do your thing...
}
于 2013-08-06T10:23:26.820 回答
2

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

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

正如您所指出的，您引用了表格，这应该有效：

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

于 2013-08-06T10:37:00.837 回答
0

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

table.on("dbclick", "tr:not(tr tr)", listenerFunction);
于 2013-08-06T10:25:30.880 回答
0

尝试

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

演示：小提琴

于 2013-08-06T11:12:15.810 回答
0

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

两个 jsfiddles 中的相同代码

在 jQuery 1.7.2 中，将“>tr”作为选择器传递给.on不起作用，我不知道这是一个错误还是 1.7.2 中没有实现的东西，但是该.on方法是在 1.7 中添加的。

以下代码重现了该错误。我已经在运行在 Mountain Lion 上的 Chrome 和在窗口 7 上运行的 Chrome 上测试了这个

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);
});
于 2013-08-06T11:35:50.357 回答