JQuery .on() метод не стрельба?

Question

Я пытаюсь использовать метод JQuery on(). В основном я пытаюсь написать окно предупреждения, подобное тому, которое находится здесь. Если вы когда-либо пробовали проголосовать за свой собственный комментарий или нить, вы поймете, о чем я говорю.

У меня есть функция JS, как показано ниже, которая просто возвращает мой бокс с сообщением.

function alert_box(msg){ 
    return "<div class='alert-box'><p>" + msg + "<br /><i>(Click to Close)</i></p></div>"; 
} 

Я затем вызвать тревоги ящик, как так

$(that).append(alert_box(data.err)); 

Вышеуказанные работы, как ожидается, но проблема эта функция не вызывает. .alert-box добавляется с вышеуказанным кодом, но не удаляется с помощью приведенного ниже.

$('.alert-box').on({ 
    click: function() { 
     $('.alert-box').remove(); 
    } 
}); 

Я предполагаю, что его что-то делать с .alert-box класс добавляется после DOM. У кого-нибудь есть какие-то указатели на это?

Answer 1

Форма .on(), которую вы использовали, не обрабатывает динамически добавленный контент. Если вы хотите изменить его для обработки динамического содержимого, вы можете использовать его, когда вы передаете ему общий родительский объект, а затем аргумент для фильтра, который будет фильтровать:

Прототипом для этой формы .on() является: .on(events-map [, selector] [, data]) , И ваш код будет работать так:

$(document.body).on({ 
    click: function() { 
     $('.alert-box').remove(); 
    } 
}, '.alert-box'); 

В этой новой форме, вы прикрепление обработчика события для родительского объекта, а затем ищете клики в любых детях, которые соответствуют селектору «.alert ящика». Лучше всего выбрать родительский объект, который находится так близко от того, где будут ваши клики, но тот, который не изменяется. Я использовал document.body здесь только потому, что знаю, что существует, и вы не показали свой другой HTML для меня, чтобы узнать, что еще можно использовать.