Exclude selection Click through jQuery

Question

I try to trigger an action when I click anywhere tr with the parent class. Except when I click on one of the dropdowns.

$('tr.parent') .css("cursor", "pointer") .click(function (e) { if($(e.target).not('select')){ // do something } 

I am trying to do the following, but this does not work.

http://jsfiddle.net/0Lh5ozyb/60/

Answer 1

This should solve the problem for both Chrome and Firefox:

 $('tr.parent') .css("cursor", "pointer") .click(function (e) { if ($(e.target).is('select') || $(e.target).is('option')) { // } else { $(this).css('background-color', 'red'); } }); $('tr[class^=child-]').find('td > div, td').hide(); 

JSFiddle Test

Edit: a simplified version if you do not need to do anything when you press the select button.

 $('tr.parent') .css("cursor", "pointer") .click(function (e) { if (!($(e.target).is('select') || $(e.target).is('option'))) { $(this).css('background-color', 'red'); } }); $('tr[class^=child-]').find('td > div, td').hide(); 

JSFiddle Test

Answer 2

Try the following:

 $('tr.parent') .css("cursor", "pointer") .click(function (e) { if($(e.target).is("select")) { //... it was a select } else { //... it was not a select } } 

Answer 3

jQuery not is a filtering method. Thus, it creates a jQuery object. When nothing matches this, it still returns an empty array that is not false. As a result, your test is always tested.

You can adapt your test using the jQuery test is statement, which checks if your object matches the selector. The following is the optimization Roya Namira's answer :

 $('tr.parent') .css("cursor", "pointer") .click(function (e) { if($(e.target).is(":not(select)")) { //... it was not a select } }); 

Answer 4

According to the jQuery site , you should use not with them so that descendants of elements attach this event! try it

  $('tr.parent *').not('select') .css("cursor", "pointer") .click(function (e) { // do something } } 

PS: this can attach an event more than once to an element contained in another thread