With an input flag inside the table row, can I add a click event for the row and still be able to click enter

Question

I have a table:

<table> <tr> <td>Something</td> <td>Something Else</td> <td><input type='checkbox' value='clickme' id='yes'></td> </tr> 

For the user, if they click on a row, they get more data about the row, and if they click on this flag, they will be presented with other options. how can i listen to every event in jquery. My problem is that the checkbox for the checkbox obviously disables the event for the row by clicking

 $('tr').click(function(){ alert('you clicked the row'); }); $('#yes').change(function(){ alert('you clicked the checkbox'); }); 

if the item is being created dynamically, will this work:

  $('#someTableId').on('click','#yes',function(e){ alert($(this).attr('id')); e.stopPropagation(); }); 

Update: the answer to part 2 is yes.

Answer 1

You can use event.stopPropagation () to try the following: -

 $('#yes').click(function(e){ e.stopPropagation(); }); 

Demo version

Answer 2

Use event.stopPropagation to stop the bubbles event, you will need to bind a new click event for this flag.

Prevents bubbles from appearing in the DOM tree, preventing parent event notification handlers.

Live demo

 $('#yes').click(function(event){ event.stopPropagation(); }); 

Another alternative may be to add an add click handler for the checkbox to skip the processing of the tr-click handler when the source of the checkbox event is.

Live demo

 $('tr').click(function(event){ if(event.target.id === 'yes') return; alert('you clicked the row'); }); 

Answer 3

Use event.stopPropagation ();

Definition

Prevents bubbles from appearing in the DOM tree, preventing parent event handlers from being notified of the event.