Как подключить обработчики событий jquery для недавно введенного html?

Как использовать .on(), если HTML еще не создан? На странице jQuery указано

Если на страницу вводится новый HTML-код, выберите элементы и присоедините обработчики событий после того, как новый HTML будет помещен на страницу.

Но я не совсем уверен, как это сделать. Есть ли способ "перезагрузить" обработчик событий?

Итак, если у меня был

$(document).ready(function(){
    $('.test').on('click', function(){
        var id = $(this).attr('id');
        console.log("clicked" + id);
    });
generatePage();
});

где generatePage() создает кучу divs с .test, как бы я переподдерживал .on()?

Я знаю, что подобные вопросы заданы, но я не нашел то, что искал после быстрого поиска.

Ответы

Ответ 1

Используйте. как в примере ниже. Можно предположить, что тег body всегда доступен, поэтому можно безопасно присоединить обработчик события к телу и делегировать события селектору, в этом случае .test.

$(document).ready(function(){
    $('body').on('click', '.test', function(){ // Make your changes here
        var id = $(this).attr('id');
        console.log("clicked" + id);
    });

    generatePage();
});

Или, если generatePage() также генерирует теги html, head и body, используйте document как ваш селектор.

$(document).ready(function(){
    $(document).on('click', '.test', function(){ // Make your changes here
        var id = $(this).attr('id');
        console.log("clicked" + id);
    });

    generatePage();
});

Согласно документации jQuery. принимает следующие параметры:

.on( events [, selector] [, data], handler(eventObject) )

Включение селектора описывается следующим образом:

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