Невозможно связать событие click с новыми элементами span (jQuery)

Question

Я не могу привязывать события к списку, который генерируется jQuery. Я рассмотрел некоторые подобные проблемы, но havent нашел какое-либо решение.

Это код, который генерирует мой список:

var list = '<ul>'; 
for (var i = 0; i < data.length; i++) 
    { 
    list += '<li id="' + data[i].id + '"><span class="btnRemoveItem" title="Remove item from list"></span>' + data[i].name + '</li>'; 
    } 
    list += '</ul>'; 
    jQuery("#spanContainer").html(list); 

Это создает мой розыск. Прекрасно работает. Но я не могу манипулировать списком через jQuery. Некоторые исследования указывают мне в сторону привязки событий к моему списку. Как мне это сделать? Я просмотрел несколько сообщений, имеющих одну и ту же проблему, но не нашел ничего, что разрешило мою проблему.

Я использую jQuery 1.2.6 и не могу использовать v.1.3 (который имеет функцию .live).

Ресурсы: docs.jquery.com/Events/bind

Edit: Я попытался это, но он не работает. .

JQuery ("# 7276") связывают ("щелчок", функция() {Alert ('тест');})

этого вывода HTML:

<span id="itemList"> 
    <ul> 
    <li id="listItem_7276"><span title="Remove item from list" class="btnRemoveItem" id="7276"/>Main item</li> 
    <li id="listItem_7281"><span title="Remove item from list" class="btnRemoveItem" id="7281"/>Test item 4</li> 
    </ul> 
</span> 

Answer 1

Попробуйте строить структуру данных в JQuery: (непроверенный код)

ul = $("<ul/>"); 
for (var i = 0; i < data.length; i++) { 
ul.append(
$("<li/>") 
.attr("id", data[i].id) 
.append($("<span/>") 
    .addClass("btnRemoveItem") 
    .attr("title", "Remove item from list") 
    .click(function() { 
    $(this).parent().remove(); 
    }) 
).append(data[i].name) 
); 
} 
jQuery("#spanContainer").html(ul); 

Answer 2

livequery плагина работает с JQuery 1.2.6 и делает по существу такие же, как живое() событие (и более)

Answer 3

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

$("ul span.btnRemoveItem").click(yourOnClickHandler); 

это добавит обработчик OnClick для всех элементов пролетных в вашем списке. Или вы можете получить доступ, что вы используете:

$("ul span.btnRemoveItem").bind("event", yourOnEventHandler); 

И если вы хотите получить доступ к каждому элементу списка отдельно после того, как вы вставили его в DOM, вы можете сделать:

$("ul li#" + data[i].id).dosomething(); // here you can specify whatever you want to do. 

Answer 4

Хм ... что HTML функция должна работать при добавлении списка к #spanContainer.

Поскольку вы не можете использовать в прямом эфире(), вам придется вручную повторно связать события после добавления в список #spanContainer так:

function listGenerator(){ 
    ...//create the list 
    jQuery('#sc').html(list); 
    jQuery('#sc ul li').bind('click', function(){...}); 
} 

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

Answer 5

Я не вижу код, в котором вы назначаете события в свой список. Вы все еще хотите что-то вроде этого:

$("#spanContainer span.btnRemoveItem").click(function() { 
    $(this). ... ; 
}); 

В качестве альтернативы - если вы специально спрашивали о живой функциональности нового к 1.3, то вы можете использовать плагин UI для более старой версии jQuery, называемой livequery.

http://docs.jquery.com/Plugins/livequery

Так что-то вроде этого:

$("#spanContainer span.btnRemoveItem").livequery('click', function(e){ 
    $(this). ...; 
}); 

Йорг

Answer 6

Перейти на один уровень и определите событие с помощью $ (TheParent) .На ("щелчок", ".someClass" , function() {})

Это будет работать на существующих и вновь созданных детей с классом .someClass