Jquery .not() based on child elements

Question

http://jsfiddle.net/L7axv/

I have a column in a table dedicated to comments. I need for when the cell is clicked, a popup appears allowing users to add comments. Inside the cell will be existing comments and a way to remove them. When you click to remove a comment, you should not then see the popup.

I tried:

$("td").not('div').click(function(){
    $('#popup').show();
});   //was hoping this would mean if td is clicked, and clicked area is not a div


$("div").click(function(){
    $(this).hide();
});

Answer 1

You can use e.stopPropagation() on div to prevent .click() event bubble up the DOM tree:

$("div").click(function(e){
    e.stopPropagation();
    $(this).hide();
});

Updated Fiddle

Answer 2

You can do this

$("td").click(function(e){
    if( !$(e.target).is('div') ) {
        $('#popup').show();
    } else {
        $(e.target).hide();
    }
});

http://jsfiddle.net/L7axv/4/

If the clicked element is not a div, show the popup. You can actually delete the div click handler using this

Answer 3

You can add an event to click on a column by using hierarchical selectors provided by jQuery.

$('#table td:eq(index)').click(function(){
 $('#popup').show();
});

PS: index is a number depending on which you want click to be associated.