jQuery & CSS Selectors

Question

I have a table row with one of the td containing a button. I want to be able to click the tr and have that trigger a function. However, I do not want this function to be triggered if the button within the td is clicked. My current method is by using a :not selector on the td of the button but i would prefer to use the button itself. The class noclick is the class of the button parent td.

$('#mytable td:not(.noclick)').on('click',function(){

EDIT: for clarification

<tr data-x="test">
  <td>NAme</td>
  <td>Phone</td>
  <td class="noclick"> // this is where the current not selector works
    <button>X</button> // this button is the only place I want the not selector to work
  </td>
</tr>

So to clarify I want a similar process to my posted handler but instead I want the buttons parent td to work for the click function and not work for the button itself.

I have tried a few different things including still using the td but trying to make the td a minimal size. I was not able to get the td to become smaller.

Did the above selector not work as you expected? Can you also add your html then we can give you a more complete answer. — Nathaniel Flick
– Nathaniel Flick, Commented Jun 24, 2020 at 19:48
Check this answer stackoverflow.com/a/9183467/12804871 it seems your case — bad_kotya
– bad_kotya, Commented Jun 24, 2020 at 19:52
@nathanielflick it works as expected but this is for the td as a whole, not the button — Billy Bones
– Billy Bones, Commented Jun 24, 2020 at 19:55
Is there something other than the button in the td that you want the click logic to happen for? — Taplar
– Taplar, Commented Jun 24, 2020 at 19:56

PeterKA · Accepted Answer · 2020-06-24 21:06:38Z

2

When e.target equals this you clicked on the td element, not a descendant, such as button. In other words the click event is not due to event bubbling.

$('#mytable td:not(.noclick)').on('click',function(e) {
    if(e.target !== this) return;
    console.log('Clicked!!!!');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr>
  <td>col 1</td>
  <td>col 2</td>
  <td>col 3</td>
  <td>col 4<button class="noclick">No Click</button></td>
  <td>col 5</td>
</td>
<tr>
  <td>col 1</td>
  <td>col 2</td>
  <td>col 3</td>
  <td>col 4<button class="noclick">No Click</button></td>
  <td>col 5</td>
</td>
<tr>
  <td>col 1</td>
  <td>col 2</td>
  <td>col 3</td>
  <td>col 4<button class="noclick">No Click</button></td>
  <td>col 5</td>
</td>
<tr>
  <td>col 1</td>
  <td>col 2</td>
  <td>col 3</td>
  <td>col 4<button class="noclick">No Click</button></td>
  <td>col 5</td>
</td>
</tbody>
</table>

Reference

edited Jun 24, 2020 at 21:06

answered Jun 24, 2020 at 20:18

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Billy Bones Over a year ago

Thank you for the working solution! I will accept it if you could just provide some explanation about whats going on in the background with if(e.target !== this) return;. More specifically what e and e.target will be. I can edit in the info if necessary.

Collectives™ on Stack Overflow

jQuery & CSS Selectors

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related