如何获得点击的td

Question

I have a tr with a click listener. I want to know which td was the one clicked:

<tr class ="clickingClass">
  <td> first td </td>
  <td> second td </td>
</tr>

$(".clickingClass").on('click', function() {
  $(this).closest('td');
});

The above shows nothing. How can I do this?

Answer 1

The issue is because closest() goes up the DOM, not down it.

To do what you require you could instead attach the event handler directly on the td elements:

$(".clickingClass td").on('click', function() {
    // do something with $(this)...
});

Alternatively you could use the target property of the event passed to the handler function to determine which td was clicked:

$(".clickingClass").on('click', function(e) {
    // do something with $(e.target)...
});

Answer 2

You can use event.target for this

$(".clickingClass").on('click',function(event){
    alert(event.target);
});

Answer 3

Why not bind to the td s instead?

$(".clickingClass td").on('click',function(){
   this //td
});