jQuery делегированное событие клика не срабатывает

Question

В целях развития я играю и создаю свой собственный эффект лайтбокса. У меня есть, чтобы загрузить оверлейный div с содержимым div посередине и использовал стандартный значок перекрестка в правом верхнем углу, чтобы позволить пользователю закрыться.

Проблема в том, что когда я нажимаю крест, ничего не происходит. У меня было:

$('.cross').click(function() { 
    $('.popup-overlay').remove(); 
}); 

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

$('.popup-overlay').on('click', '.cross', function() { 
    alert('click'); 
}); 

и:

$('a[rel="popup"]').on('click', '.popup-overlay', function() { 
    alert('click'); 
}); 

но не стрелять. Это HTML-код, который динамически загружается в.

<div class="popup-overlay"> 
    <div class="half-height"> 
     <div class="popup-box"> 
      <img src="assets/img/cross.png" alt="close" class="cross"> 
     </div> 
    </div> 
</div> 

так .....

Может кто-нибудь сказать мне, как сделать это так, чтобы, когда я нажимаю .cross, в .popup-наложение HTML удаляется из тела?

Заранее благодарим за помощь.

Answer 1

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

Bind, в худшем случае, к этому документу:

$(document).on('click', '.popup-overlay .cross', function(e) { 
    $(this).closest('.popup-overlay').remove(); 
}); 

В идеале вы бы выбрать статический элемент в (существует при загрузке страницы/код выполняется, и никогда не будет удален в течение срока действия документа) это как можно ближе в DOM к динамически добавленным элементам (ваши .popup-overlay).