EventListener ошибка в консоли при запуске кода

174

07 июля 2018, 03:50

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

У всплывающего попапа есть соответствующий button, нажатие на который должно производить закрытие данного попапа, на этом же элементе и должен быть EventListener.

Суть проблемы и вопрос:

На момент старта кода, консоль выдает ошибку:

Uncaught TypeError: Cannot read property 'addEventListener' of null

Оно и понятно, ведь слушатель "висит на элементе", которого попросту еще нет в DOM, соответственно, поиск равен null.

Далее по необходимому сценарию попап добавляется в DOM и все работает без проблем и никаких ошибок не возникает - окно появляется и закрывается.

Вопрос:
Как избавится от возникающий ошибки?

Answer 1

$(document).ready(function () { 
  //on(event, future-created-element, function 
  $('.main').on('click', '#some', function () {  
      console.log('clicked'); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="main"> 
<button id="some">Click me</button> 
</div>