Question

假设我有一个嵌套表，如下所示：

<table id="search">
<tbody>
    <tr><td>a</td></tr>
    <tr><td>b</td></tr>  
   <tr><td>
       <table>
           <tr id="ex"><td>-----------</td></tr>           
        </table>
       </td>
   </tr>
       </tbody>

我想将click事件绑定到不在嵌套表中的行（所以不要绑定到ID为＆＃34的行; ex＆＃34;）。为了澄清，当我点击排除的行时，我不希望发生任何事情。这似乎应该很容易，但我在使用IE传播事件时遇到了麻烦（我认为）。

JsFiddle：http://jsfiddle.net/9TWPx/1/

以下是我尝试的内容：

基本案例：默认行为）

$("#search tr").click(function() {
alert($(this).closest("tr").index()); 
});

当点击最后一行时，这会导致两个警报 - 首先是一个包含索引0，另一个包含索引2.

尝试＃1）

$("#search tr").not("#ex").click(function() {
alert($(this).closest("tr").index());
});

这不起作用 - 我不再获得包含0索引的警报，但我仍然得到包含索引2的警报 - 这表明某些东西必须冒泡到父级别（对吗？）

event.stopPropagation（）似乎没有帮助 - 尝试＃2）

$("#search tr").not("#ex").click(function(event) {
event.stopPropagation();   
alert($(this).closest("tr").index());    
});

这使我得到索引为2的警报。

尝试＃3 +）

我尝试了很多不同的preventDefault（），stopBubble，stopPropogation等组合，似乎没有什么能阻止我获得索引2的警报。

我意识到这可能有一个简单的答案，但如果你知道的话请与我分享！

最终编辑：事实证明这与事件传播无关，只是因为我错过了包含嵌套表本身的行正在将事件绑定到它的事实，以及嵌套表。

Answer 1

只需使用

$("#search > tbody > tr:not(:has('table'))").click(function() {
    alert($(this).closest("tr").index());
});

Fiddle

Answer 2

编辑：更新代码 -

$('#search tr').click(function (event) {
    event.stopPropagation();
    if ( this.id != "ex" ) {
        alert($(this).closest("tr").index());
    }
});

http://jsfiddle.net/jayblanchard/9TWPx/10/（我也确保你的内部桌子已关闭）

嵌套表，如何阻止jquery事件触发IE9

2 个答案: