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

Question

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

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

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 / События / bind

Edit: Я пробовал это, но это не работает.

jQuery ("# ​​7276"). Bind ("click", function () {alert ('test');})

Это вывод 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

Поднимитесь на один уровень вверх и определите свое событие, используя $ (TheParent) .on ("click", ".someClass", function () {})

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

Answer 3

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

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

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

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

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

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

Йорг

Answer 4

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

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

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

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

Answer 5

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

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

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

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

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

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

Answer 6

Плагин livequery работает с jQuery 1.2.6 и по сути аналогичен событию live () (и другим)