При добавлении HTML кода с помощью .prepend()|jQuery никакие события на добавленный код не срабатывают

if(incorrectURLs) {
$('#for_errors').prepend('' +
    '<div class="message message--warning">'+icon+'' +
        '<div class="message-body">' +
             '<p class="message-text">' +
                 'Внимание!...' +
             '</p>' +
        '</div>' +
        '<div class="message-close"></div></div>'
    );
    return false;
}

$('.message-close').on('click', function() {
    console.log('sdsd');
    $(this).closest('.message').hide();
});

в таком виде в логах ничего не происходит. Но если вставить тот же HTML код в дом дерево вручную, срабатывает без проблем. Почему не срабатывает при добавлении с помощью jQuery и как это решить?


Ответы (1 шт):

Автор решения: Алексей Шиманский

Заменить

$('.message-close').on('click', function() {

на

$(document).on('click', '.message-close', function() {

Не срабатывает потому. что слушатель вешается ДО того, как элемент появится на странице. Надо вешать слушателя либо сразу после добавления, либо делегировать событие элементу, который всегда на странице есть. В текущем примере это document

→ Ссылка