Проверьте, был ли нажат последний элемент.

Question

. Я пытаюсь выяснить, было ли нажато последнее td из tr. Это мой HTML пример:

<table> 
    <tr> 
     <td>Foo</td> 
     <td>Bar</td> 
     <td>Clicked</td> 
    </tr> 
</table> 

И это мой код в настоящее время Javascript (не работает, как это):

$('table').on('click', 'tr', function(e) { 
    if ($(this).find('td').is(':last-child')){ 
     alert("Last td clicked!"); 
    } 
}); 

Примечание: Мне нужно использовать tr-selector для других целей. Поэтому важно, чтобы щелчок указывал на tr.

Answer 1

Этот ответ подразумевает, что левши события является общими для всех <td> элементов и хотят различать между последним элементом

без изменения обработчика событий:

События объект содержит ссылку на элемент, который был нажат. Это можно использовать.

Свойство target в объекте event содержит ссылку на элемент, который на самом деле щелкнул. jQuery is() можно использовать, чтобы проверить, является ли последний элементом в <tr>.

$('table').on('click', 'tr', function(e) { 
    console.log($(e.target).is($(this).find('td:last'))); 
    // OR 
    // console.log($(e.target).is(':last-child')); 
}); 

Demo

Связывание событий на <td>

Событие может быть привязка по <td> элементов внутри селектора <table> и :last-child может быть использован с is(), чтобы проверить, если элемент, который будет нажата является последним ребенком.

$('table tr').on('click', 'td', function(e) { 
    console.log($(this).is(':last-child')); 
}); 

Demo

Answer 2

Попробуйте использовать tr td:last-child селектор.

$('table').on('click', 'tr td:last-child', function (e) { 
 
    alert("Last td clicked!"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td>Foo</td> 
 
     <td>Bar</td> 
 
     <td>Clicked</td> 
 
    </tr> 
 
</table>

UPDATE: в соответствии с обновленным вопрос

$('table').on('click', 'tr', function (e) { 
 
    if($(e.target).is(':last-child')) { 
 
     alert("Last td clicked!"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td>Foo</td> 
 
     <td>Bar</td> 
 
     <td>Clicked</td> 
 
    </tr> 
 
</table>

Answer 3

Вам не нужно что .find(). Кроме того, вы хотите проверить, было ли нажато последнее td или las tr? В любом случае, вы просто должны сделать это следующим образом:

$('table').on('click', 'td', function(e) { 
    if($(this).is(':last-child')){ 
     alert("Last td clicked!"); 
    } 
}); 

DEMO

Answer 4

Добавить слушателя событий непосредственно последнего ребенка

Html

<table> 
    <tr> 
     <td>Foo</td> 
     <td>Bar</td> 
     <td>Clicked</td> 
    </tr> 
</table> 

Javascript

$('table').on('click', 'tr td:last-child', function(e) { 
    alert("Last td clicked!");  
}); 

JSFiddle