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/Events/bind

修改我试过这个，但它不起作用。

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

livequery插件适用于jQuery 1.2.6，与live（）事件基本相同（及更多）

Answer 3

我不确定通过jquery操作列表是什么意思，但如果你想将一些事件处理程序绑定到列表中的元素，你可以使用：

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

这将为列表中的所有span元素添加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

嗯......将你的列表附加到#spanContainer时，html函数应该可以正常工作。

由于你不能使用live（），你必须在将列表附加到#spanContainer之后手动重新绑定事件，如下所示：

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

（另外，jQuery each（）函数可以帮助您生成该列表...您可能想要查看它）

Answer 5

我看不到将事件分配到列表的代码。你仍然想要这样的东西：

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

或者 - 如果你特别询问1.3的新功能，那么你可以使用一个名为livequery的旧版jQuery的UI插件。

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

这样的事情：

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

约尔格

Answer 6

上升一级并使用$（TheParent）.on（“click”，“。someClass”，function（）{}）

定义事件

这适用于具有类.someClass

的现有和新创建的子项

无法将click事件绑定到新创建的span项（jQuery）

6 个答案: