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

Что означает «динамично созданный элемент»? Это означает, что элемент был создан (вручную пользователем или скриптом страницы) после загрузки страницы.

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

Первый вариант — .on()

Чтобы установить событие на динамично созданный контент можно использовать .on() метод. Ниже показан пример того как можно его использовать.

HTML

Сначала нужно создать каркас, который будет использоваться для генерации элементов на странице. Как например ниже:

<div></div>
<button>Создать новый элемент</button>

jQuery

При нажатии на <button>, будет генерироваться динамичный контент в виде <p> элемента с классом text внутри <div> элемента. После чего, можно нажать на <p class="test"></p> и должен появиться alert() на экране с текстом элемента «Нажми на меня X(число) )».

Для примера я использовал событие нажатия.

var counter = 0;

$("button").click(function() {
    $("div").append("<p class='test'>Нажми на меня " + (++counter) + "</p>")
});

$("div").on("click", "p.test", function(){
    alert($(this).text());
});

Демо .on()

Второй вариант — .delegate()

.on() не единственный вариант того, как можно установить событие на динамично созданный контент. Так же есть метод, который называется .delegate().

.delegate() работает таким же образом как и .on(), единственное что меняется — это установка аргументов в метод.

Пример .on()

$("div").on("click", "p.test", function(){
    alert($(this).text());
});

Пример .delegate()

$("div").delegate("p.test", "click", function(){
    alert($(this).text());
});

Из двух примеров выше видно, что в .delegate(), событие прописывается вторым аргументом, а сам элемент на первом месте. В .on() — это происходит наоборот. В этом и есть разница.