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

этот вопрос уже есть ответ здесь:

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

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

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

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

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

8 64
javascript html jquery

8 ответов:

этого:

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

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

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

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

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

кстати, я рекомендую костяк.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
115

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

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

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

ранее у нас есть .live (функция)

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

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

делегат():

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

пример:

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

ON ():

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

пример:

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

попробуйте что-то вроде 

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

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

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

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

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

1

используйте новую функцию jQuery on в 1.7.1 -

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

0

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

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

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

Я надеюсь, что это помогает.

0

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

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

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

0