Получить уникальное значение идентификатора из нескольких классов с именем класса по клику

Question

Эти строки генерируются динамически с идентификаторами на основе базы данных. Я в основном делаю программу, которая связывается с PHP через Ajax запросы, эти строки основаны на том запросе, поступающем в формате JSON.

<tr role="row" class="odd">
    <td>New</td>
    <td class="tdClick" id="1">Regular Loan</td>
    <td>3/18/2020 13:42</td>
    <td>N/A</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis mauris ac felis tristique hendrerit. Cras efficitur sem elit. Morbi pharetra turpis accumsan volutpat placerat.</td>
</tr>
<tr role="row" class="even">
    <td>New</td>
    <td class="tdClick" id="13">Educational Loan</td>
    <td>3/18/2020 14:42</td>
    <td>N/A</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis mauris ac felis tristique hendrerit. Cras efficitur sem elit. Morbi pharetra turpis accumsan volutpat placerat.</td>
</tr>

Теперь то, что я хочу, когда я нажимаю на td с классом tdClick, появляется модальное устройство, которое отправляет запрос в мой файл PHP и получает другой ответ JSON - однако я хочу, чтобы идентификатор передавался как данные в ajax code.

Обычно, если идентификатор был stati c и есть только один класс, я бы создал что-то вроде:

$(".tdClick").click(function(e){
    var id = $(this).attr('id');
    alert(id);
});

Однако у меня есть несколько классов tdClick, и каждый из них есть разные идентификаторы. Код выше - мой текущий код, и он, похоже, не работает.

Answer 1

вам просто нужно обернуть ваш обработчик событий в $ (document) .ready. Кроме того, вы также можете получить id для каждого тд, используя e.target.id. e.target вернет элемент (в данном случае td), для которого произошло событие нажатия

$(document).ready(function() {

$('.tdClick').click(function(event)  {
alert(event.target.id);
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr role="row" class="odd">
    <td>New</td>
    <td class="tdClick" id="1">Regular Loan</td>
    <td>3/18/2020 13:42</td>
    <td>N/A</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis mauris ac felis tristique hendrerit. Cras efficitur sem elit. Morbi pharetra turpis accumsan volutpat placerat.</td>
</tr>
<tr role="row" class="even">
    <td>New</td>
    <td class="tdClick" id="13">Educational Loan</td>
    <td>3/18/2020 14:42</td>
    <td>N/A</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis mauris ac felis tristique hendrerit. Cras efficitur sem elit. Morbi pharetra turpis accumsan volutpat placerat.</td>
</tr>
</table>

Answer 2

Поскольку " эти строки генерируются динамически ", вы можете использовать делегирование события , чтобы присоединить один прослушиватель событий к строкам таблиц, которые существуют сейчас или добавляются в будущем, например:

// Attach a delegated event handler
$(document).on("click", ".tdClick", function(event) {
   var id = this.id;
   alert(id);
});