Как я могу выбрать элемент DOM, созданный другим событием?

-4

Первое событие клика отправляет вызов API, который возвращает несколько результатов поиска.

Второе событие клика должно происходить при нажатии "вверх", что является опцией в каждом возвращенном результате поиска.

Проблема в том, что я не могу выбрать кнопки увеличения в результатах поиска, потому что они были созданы (путем клонирования другого элемента) после первого события click.

Может ли кто-нибудь объяснить, почему это происходит?

Часть первого события кликов:

success: function(json) {
var reviews = json.reviews;

$.each(reviews, function(i) {
var critic = reviews[i].critic;
var quote = reviews[i].quote;
var score = reviews[i].original_score;

$('#tile-demo').clone().removeAttr('id').removeClass('hidden')
.find('.critic-name').text(critic).end()
.find('.critic-score').text(score).end()
.find('.critic-quote').text(quote).end()
.appendTo('.review-grid');
}); //end each loop

} //end success call

новый вызов, который должен выбрать клон # tile-demo:

$('.search-results').click(function(){
var goodCritic = $(this).siblings('.critic-name').text();
console.log(goodCritic);
});

спросил(а) 2021-01-25T16:30:18+03:00 5 месяцев назад
1
Решение
64

Используйте метод On следующим образом:

$('#containerId').on('click','upvotebuttons',function(){write your code here});

где containerId является идентификатором контейнера div, где вы визуализируете новые данные, и заменяете [upvotebuttons] на [имя класса] кнопок upvote.

ответил(а) 2021-01-25T16:30:18+03:00 5 месяцев назад
45

Я просто натолкнулся на быстрый сценарий Джеффри Пути, который предлагает немного другое решение. Другой ответ работает отлично - это просто еще один способ сделать это (все еще использует делегирование событий).

$('#parent-of-target').click(function(e) {  

if ( $(e.target).is('#target-element') ) {
alert('clicked');
}
});

ответил(а) 2021-01-25T16:30:18+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема