jQuery не работает для динамически созданных элементов

У меня есть кусок jQuery, который перебирает каждый элемент в заданном div ( #container ) и каждый раз, когда нажимается #container , появляется предупреждение javascript. Это отлично работает, если являются статическими.

Однако, если я использую fragment кода, например:

 $(someLink).click(function(){ $("#container").html(  ) }); 

Код jQuery не срабатывает. Как ни странно, хотя

Мой вопрос: есть ли причина, по которой мои события Click не работают для динамически созданных элементов? Я предполагаю, что мне нужно будет добавить что-то в мой готовый документ или скрипт (который запускается каждые 100 миллисекунд), чтобы подключить события?

Сделай это:

  $( '#wrapper' ).on( 'click', 'a', function () { ... }); 

где #wrapper – это статический элемент, в который вы добавляете динамические ссылки.

Итак, у вас есть обертка, которая жестко закодирована в исходный код HTML:

 

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


Кстати, я рекомендую Backbone.js – он дает структуру для этого процесса:

 var YourThing = Backbone.View.extend({ // the static wrapper (the root for event delegation) el: $( '#wrapper' ), // event bindings are defined here events: { 'click a': 'anchorClicked' }, // your DOM event handlers anchorClicked: function () { // handle click event } }); new YourThing; // initializing your thing 

источник: это сообщение

если вы создали свои элементы динамически (используя javascript), то этот код не работает. Потому что .click () присоединяет события к уже существующим элементам. Поскольку вы динамически создаете свои элементы с помощью javascript, это не работает.

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

Раньше у нас есть. Функция live ()

 $('selector').live('click', function() { //your code }); 

но .live () устарела. Это может быть заменено другими функциями.

Делегат ():

Используя функцию delegate (), вы можете щелкнуть динамически сгенерированные элементы HTML.

Пример:

 $(document).delegate('selector', 'click', function() { //your code }); 

НА():

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

Пример:

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

Попробуйте что-нибудь вроде

 $("#container").on('click', 'someLinkSelector', function(){ $("#container").html(  ) }); 

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

 $("#container").delegate("span", "click", function (){ alert(11); }); 

Использование .click будет привязывать события только к уже существующим элементам.

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

Используйте новый jQuery для функции в 1.7.1 –

http://api.jquery.com/on/

Я столкнулся с этой проблемой несколько дней назад – решение для меня состояло в том, чтобы использовать .bind () для привязки требуемой функции к динамически созданной ссылке.

 var catLink = $('' + category.category + ''); catLink.bind("click", function(){ $.categories.getSubCategories(this); }); getSubCategories : function(obj) { //do something } 

Надеюсь, это поможет.

Вы должны добавить событие click к существующему элементу. Вы не можете добавить созданное динамическое событие в элементы dom. Я хочу добавить к ним событие, вы должны привязать событие к существующему элементу, используя «.on».

 $('p').on('click','selector_you_dynamic_created',function(){...}); 

.delegate тоже должен работать.