'Nested Tables, how to stop jquery event firing IE9

Suppose I have a nested table like the following:

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

I want to bind a click event to the rows which are not in the nested table (so not to the row with ID "ex"). To clarify, I do not want anything at all to occur when I click on the excluded row. This seems like it should be easy, but I am having trouble with IE propagating events (I think).

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

Here's what I've tried:

Base Case: Default behavior)

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

When clicking on the last row, this causes TWO alerts - firstly one containing the index 0, and then one containing the index 2.

Attempt #1)

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

This doesn't work - I no longer get the alert containing the 0 index, but I still get the alert containing the index 2 - which indicates to me that something must be bubbling up to the parent level (right?)

event.stopPropagation() doesn't seem to help - Attempt #2)

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

This causes me to get an alert with the index 2.

Attempt #3+)

I tried many different combinations of preventDefault(), stopBubble, stopPropogation etc and nothing seems to stop me from getting the alert with the index 2.

I realize this may have a simple answer, but please share it with me if you know!

Final edit: Turns out that this has nothing to do with event propagation, just to do with the fact that I missed that the row containing the nested table itself was getting the event bound to it, as well as the row inside the nested table.



Solution 1:[1]

Just use

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

Fiddle

Solution 2:[2]

EDIT: Updated code -

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

http://jsfiddle.net/jayblanchard/9TWPx/10/ (I also made sure your inner table was closed)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2