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

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

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

$(someLink).click(function(){
   $("#container").html( <new html with new spans> )
});

Код jQuery не запускается. Как ни странно, хотя

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

Ответы

Ответ 1

Сделайте это:

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

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

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

<div id="wrapper"></div>

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

Btw, я рекомендую 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

Ответ 2

источник: этот пост

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

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

Раньше мы имеем live() function

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

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

делегат():

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

Пример:

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

ВКЛ():

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

Пример:

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

Ответ 3

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

$("#container").on('click', 'someLinkSelector', function(){ $("#container").html( <new html with new spans> ) });

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

Ответ 4

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

Ответ 5

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

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

Ответ 7

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

var catLink = $('<a href="#" id="' + i + '" class="lnkCat">' + category.category + '</a>');
catLink.bind("click", function(){
 $.categories.getSubCategories(this);
});

getSubCategories : function(obj) {
 //do something
}

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

Ответ 8

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

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

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