У меня есть пустая таблица, к которой я добавляю строки через jQuery, используя:
$('#table > tbody:last').append('<tr id="' + symbol.Code1 + '"><td>' + symbol.Code1 + '</td><td>' + symbol.Code2+ '</td><td>' + symbol.Code3+ '</td></tr>');
Все в порядке, но когда я реализую:
$("#table tr").click(function(e) {
alert(this.id);
});
ничего не происходит.
Вам нужно делегирование событий вы можете использовать on для привязки событие click для динамически добавленных элементов. Способ привязки с кликом будет применяться к существующему элементу, но не к элементам, добавленным позже.
$(document).on("click", "#table tr", function(e) {
alert(this.id);
});
Вы можете ограничить область для on, указав ближайший родительский селектор либо по id, либо по классу родителя.
$('.ParentElementClass').on("click", "#table tr", function(e) {
alert(this.id);
});
Делегированные события имеют то преимущество, что они могут обрабатывать события из элементы потомков, которые будут добавлены в документ позже. От выбор элемента, который, как гарантируется, будет присутствовать во время делегированный обработчик событий, вы можете использовать делегированные события для избегайте частого прикрепления и удаления обработчиков событий.
Вы должны использовать метод .on
$("#table").on('click','tr',function(e) {
alert($(this).attr('id'));
});
Вы добавляете строки динамически после привязки события к существующим. Вы можете использовать делегированный подход к мероприятию, чтобы устранить проблему:
$("#table").on("click", "tr", function(e) {
alert(this.id);
});
$(document).on('click', "#tbl-body tr td", function(e) {
alert(this.id);
});