jQuery, как привязать событие onclick к динамически добавляемому элементу HTML

Первая проблема заключается в том, что когда вы вызываете append для набора jQuery с более чем одним элементом, для каждого создается клон добавляемого элемента, и, таким образом, присоединенный наблюдатель событий теряется.

Альтернативный способ сделать это - создать ссылку для каждого элемента:

function handler() { alert('hello'); }
$('.add_to_this').append(function() {
  return $('<a>Click here</a>').click(handler);
})

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

function handler() { alert('hello'); }
$('.add_to_this').each(function() {
  var link = $('<a>Click here</a>');
  $(this).append(link);
  link.click(handler);
});

Все эти методы устарели. Вы должны использовать метод on для решения вашей проблемы.

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

$(document).on('click', selector-to-your-element , function() {
     //code here ....
});

это заменяет устаревший метод .live().

Как насчет метода Live?

$('.add_to_this a').live('click', function() {
    alert('hello from binded function call');
});

Тем не менее, то, что вы сделали, похоже, должно сработать. Есть другой пост, который выглядит очень похожим.

Немного поздно на вечеринку, но я подумал, что попытаюсь прояснить некоторые распространенные заблуждения в обработчиках событий jQuery. Начиная с jQuery 1.7, .on() следует использовать вместо устаревшего .live(), чтобы делегировать обработчики событий элементам, которые динамически создаются в любой момент после назначения обработчика событий.

Тем не менее, переключить live на on непросто, потому что синтаксис немного отличается:

Новый метод (пример 1):

$(document).on('click', '#someting', function(){

});

Устаревший метод (пример 2):

$('#something').live(function(){

});

Как показано выше, разница есть. Поворот в том, что .on() на самом деле может быть вызван аналогично .live(), передав селектор самой функции jQuery:

Пример 3:

$('#something').on('click', function(){

});

Однако без использования $(document), как в примере 1, пример 3 не будет работать для динамически создаваемых элементов. Пример 3 абсолютно хорош, если вам не нужно динамическое делегирование.

Следует ли использовать $ (document) .on () для всего?

Это будет работать, но если вам не нужно динамическое делегирование, было бы более подходящим использовать пример 3, потому что пример 1 требует немного больше работы от браузера. Это не окажет реального влияния на производительность, но имеет смысл использовать наиболее подходящий для вас метод.

Следует ли использовать .on () вместо .click (), если динамическое делегирование не требуется?

Не обязательно. Ниже приведен всего лишь ярлык, например 3:

$('#something').click(function(){

});

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

Использованная литература:

• документы jQuery для .on()
• документы jQuery для .click()
• документы jQuery для .live()

Учти это:

jQuery(function(){
  var close_link = $('<a class="" href="#">Click here to see an alert</a>');
      $('.add_to_this').append(close_link);
      $('.add_to_this').children().each(function()
      {
        $(this).click(function() {
            alert('hello from binded function call');
            //do stuff here...
        });
      });
});

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

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

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

<script>
    // This simulates the object to handle
    var staticObj = [
        { ID: '1', Name: 'Foo' },
        { ID: '2', Name: 'Foo' },
        { ID: '3', Name: 'Foo' }
    ];
    staticObj[1].children = [
        { ID: 'a', Name: 'Bar' },
        { ID: 'b', Name: 'Bar' },
        { ID: 'c', Name: 'Bar' }
    ];
    staticObj[1].children[1].children = [
        { ID: 'x', Name: 'Baz' },
        { ID: 'y', Name: 'Baz' }
    ];

    // This is the object-to-html-element function handler with recursion
    var handleItem = function( item ) {
        var ul, li = $("<li>" + item.ID + " " + item.Name + "</li>");

        if(typeof item.children !== 'undefined') {
            ul = $("<ul />");
            for (var i = 0; i < item.children.length; i++) {
                ul.append(handleItem(item.children[i]));
            }
            li.append(ul);
        }

        // This click handler actually does work
        li.click(function(e) {
            alert(item.Name);
            e.stopPropagation();
        });
        return li;
    };

    // Wait for the dom instead of an ajax call or whatever
    $(function() {
        var ul = $("<ul />");

        for (var i = 0; i < staticObj.length; i++) {
            ul.append(handleItem(staticObj[i]));
        }

        // Here; this works.
        $('#something').replaceWith(ul);
    });
</script>
<div id="something">Magical ponies ♥</div>

Я считаю, что это хороший способ:

$('#id').append('<a id="#subid" href="#">...</a>');
$('#subid').click( close_link );