Событие Click не работает с динамически генерируемыми элементами

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            $("button").click(function() {
                $("h2").html("<p class='test'>click me</p>")
            });   

            $(".test").click(function(){
                alert();
            });
        });

    </script>
</head>
<body>
    <h2></h2>
    <button>generate new element</button>
</body>
</html>

Я пытался создать новый тег с именем класса test в <h2>, нажав кнопку. Я также определил событие click, связанное с test. Но событие не работает.

Может ли кто-нибудь помочь?

ОТВЕТЫ

Ответ 1

Связывание click(), которое вы используете, называется "прямой" привязкой, которая привязывает обработчик только к уже существующим элементам. Он не будет привязан к элементам, созданным в будущем. Для этого вам нужно будет создать "делегированное" привязку с помощью on().

Делегированные события имеют то преимущество, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позже.

Источник

Здесь вы ищете:

var counter = 0;

$("button").click(function() {
    $("h2").append("<p class='test'>click me " + (++counter) + "</p>")
});

// With on():

$("h2").on("click", "p.test", function(){
    alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2></h2>
<button>generate new element</button>

Ответ 2

Используйте метод .on() с делегированными событиями

$('#staticParent').on('click', '.dynamicElement', function() {
    // Do something on an existent or future .dynamicElement
});

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

P.S: Не используйте .live()! Из jQuery 1.7+ метод .live() устарел.

Ответ 3

Причина:

Click() - прикрепляет обработчик событий только в том случае, если элемент уже существует в html-коде.

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

Динамические элементы создаются с помощью javascript или jquery (не в html).

Таким образом, событие click не срабатывает.

Решение:

Чтобы преодолеть это, мы должны использовать функцию on().

функции delegate(), live() и on() имеют преимущества перед элементами DOM.

on может запускать как существующие элементы, так и будущие элементы.

on может рассматривать элементы, которые присутствуют на всей странице.

Функции делегата(), live() устарели (не используйте их).

Вы должны использовать функцию on, чтобы инициировать событие в динамически созданных (будущих) элементах.

Удалите код из $(document).ready:

$(".test").click(function(){

  alert();

});

Изменить на:

$(document).on('click','.test',function(){

  alert('Clicked');

});

Ответ 4

Для этого вам нужно использовать . live:

$(".test").live("click", function(){
   alert();
});

или если вы используете jquery 1.7+, используйте .:

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

Ответ 5

Измените

 $(".test").click(function(){

To

 $(".test").live('click', function(){

LIVE DEMO

jQuery .live()

Ответ 6

Попробуйте .live() или .delegate()

http://api.jquery.com/live/

http://api.jquery.com/delegate/

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

Дополнительная информация:

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

Ответ 7

Добавить эту функцию в файл js.  Он будет работать в каждом браузере

$(function() {
    $(document).on("click", '#mydiv', function() {
        alert("You have just clicked on ");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mydiv'>Div</div>

Ответ 8

Я нашел два решения в документации jQuery:

Сначала: используйте делегат на теле или документе

Например:

 $("body").delegate('.test', 'click', function(){
 ...
  alert('test');
 });

Почему?

Ответ.. Прикрепите обработчик к одному или нескольким событиям для всех элементов, которые соответствуют селектору, сейчас или в будущем, на основе определенного набора корневых элементов. ссылка: http://api.jquery.com/delegate/

Второе: поместите свою функцию в "$ (document)", используя "on" и присоедините ее к элементу, который вы хотите вызвать. Первым параметром является "обработчик событий", второй: элемент и третий: функция. Например:

 $( document ).on( 'click', '.test', function () {
 ...
  alert('test');
 });

Почему?

Ответ: Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать на странице в момент, когда ваш код выполняет вызов .on(). Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните привязку событий внутри обработчика документа для элементов, которые находятся в разметке HTML на странице. Если на страницу вводится новый HTML-код, выберите элементы и присоедините обработчики событий после того, как новый HTML будет помещен на страницу. Или используйте делегированные события для присоединения обработчика событий, как описано далее... ссылка: https://api.jquery.com/on/

Ответ 9

Лучший способ применить событие к динамически сгенерированному контенту с помощью делегирования.

$(document).on("eventname","selector",function(){
    // code goes here
});

поэтому ваш код будет таким же, как сейчас.

$(document).on("click",".test",function(){
    // code goes here
});

Ответ 10

Проблема заключается в том, что вы пытаетесь связать класс "test" с событием, прежде чем что-либо с классом "test" в DOM. Хотя может показаться, что все это динамично, на самом деле происходит то, что JQuery делает проход через DOM и прокручивает событие click при запуске функции ready(), что происходит до того, как вы создали "Click Me", в событии кнопки.

Добавив событие "test" Click к обработчику кликов "button", он подключится к нему после того, как правильный элемент существует в DOM.

<script type="text/javascript">
    $(document).ready(function(){                          
        $("button").click(function(){                                  
            $("h2").html("<p class='test'>click me</p>")                          
            $(".test").click(function(){                          
                alert()                          
            });       
        });                                     
    });
</script>

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

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

Ответ 11

.live отлично работает.

Это для динамически добавленных элементов на сцену.

$('#selectAllAssetTypes').live('click', function(event){
                    alert("BUTTON CLICKED");
                    $('.assetTypeCheckBox').attr('checked', true);
                });

Cheers, Анкит.

Ответ 12

JQuery .on работает нормально, но у меня были некоторые проблемы с рендерингом, реализующим некоторые из вышеперечисленных решений. Моя проблема с использованием .on заключается в том, что каким-то образом она отображала события иначе, чем метод .hover.

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

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

$('#someID div:last').hover(
    function() {
       //...
    },
    function() {
       //...
    }
);

Ответ 13

$(.surrounding_div_class).on( 'click', '.test', function () {
alert( 'WORKS!' );
});

Будет работать только в том случае, если DIV с классом .surrounding_div_class является непосредственным родителем объекта .test

Если в div будет другой объект, который будет заполнен, он не будет работать.

Ответ 14

Альтернативной и более сжатой альтернативой (IMHO) является использование сырой функции javascript, которая реагирует на событие on click, а затем передает целевой элемент обратно в jQuery, если хотите. Преимущество этого подхода заключается в том, что вы можете динамически добавлять свой элемент в любом месте, а обработчик кликов будет "работать", и вам не нужно заниматься делегированием элемента управления родительским элементам и т.д.

Шаг 1: Обновите динамический html, чтобы запустить событие onclick. Не забудьте передать объект "событие" в качестве аргумента 

    $("button").click(function() {
        $("h2").html("<p class='test' onclick='test(event)'> click me </p>")
    });

Шаг 2: Создайте тестовую функцию для ответа на событие click 

    function test(e){
        alert();
    });

Дополнительно Шаг 3: Учитывая, что вы используете jQuery, я предполагаю, что будет полезно вернуть ссылку на кнопку источника

<Предварительно >   функциональный тест (e) {       предупреждение();       // Получить ссылку на кнопку       // Объяснение этой строки доступно здесь      var target = (e.target)? e.target: e.srcElement;       // Передаем ссылку на кнопку jQuery для создания jQuery magic       var $btn = $(target);   });

Ответ 15

Я не мог заставить жить или делегировать работу над div в лайтбокс (tinybox).

Я использовал setTimeout успешно, следующим простым способом:

$('#displayContact').click(function() {
    TINY.box.show({html:'<form><textarea id="contactText"></textarea><div id="contactSubmit">Submit</div></form>', close:true});
    setTimeout(setContactClick, 1000);
})

function setContactClick() {
    $('#contactSubmit').click(function() {
        alert($('#contactText').val());
    })
}

Ответ 16

Также вы можете использовать onclick="do_something(this)" внутри элемента

Ответ 17

Я работаю с таблицами, динамически добавляя им новые элементы, а при использовании on() единственный способ сделать это работает для меня - использовать нединамический родитель, как:

<table id="myTable">
    <tr>
        <td></td> // Dynamically created
        <td></td> // Dynamically created
        <td></td> // Dynamically created
    </tr>
</table>

<input id="myButton" type="button" value="Push me!">

<script>
    $('#myButton').click(function() {
        $('#myTable tr').append('<td></td>');
    });

    $('#myTable').on('click', 'td', function() {
        // Your amazing code here!
    });
</script>

Это действительно полезно, потому что для удаления событий, связанных с on(), вы можете использовать off(), а для использования событий один раз вы можете использовать one().

Ответ 18

Вы можете добавить на клик динамически создаваемые элементы. Пример ниже. Использование команды "Когда", чтобы убедиться в ее выполнении. В моем примере я захватываю div с расширением класса, добавляя "щелчок, чтобы увидеть больше", а затем используя этот интервал, чтобы скрыть/показать оригинальный div.

$.when($(".expand").before("<span class='clickActivate'>Click to see more</span>")).then(function(){
    $(".clickActivate").click(function(){
        $(this).next().toggle();
    })
});

Ответ 19

Если у вас есть динамически добавленная ссылка на какой-либо контейнер или тело:

var newLink= $("<a></a>", {
        "id": "approve-ctrl",
        "href": "#approve",
        "class": "status-ctrl",
        "data-attributes": "DATA"
    }).html("Its ok").appendTo(document.body);

вы можете взять свой необработанный элемент javascript и добавить к нему прослушиватель событий, например щелчок:

newLink.get(0).addEventListener("click", doActionFunction);

Независимо от того, сколько раз вы добавляете этот экземпляр новой ссылки, вы можете использовать его так, как если бы вы использовали функцию jquery click.

function doActionFunction(e) {
    e.preventDefault();
    e.stopPropagation();

    alert($(this).html());
}

Итак, вы получите сообщение с сообщением

Его ok

Он имеет лучшую производительность, чем другие альтернативы.

Дополнительно. Вы можете получить лучшую производительность, избегая jquery и используя простой javascript. Если вы используете IE до версии 8, вы должны использовать этот polyfill для использования метода addEventListener

if (typeof Element.prototype.addEventListener === 'undefined') {
    Element.prototype.addEventListener = function (e, callback) {
      e = 'on' + e;
      return this.attachEvent(e, callback);
    };
  }

Ответ 20

Используйте 'on', поскольку щелчок получает привязку к уже присутствующим элементам.

Например,

$('test').on('click',function(){
    alert('Test');
})

Это поможет.