无法将点击事件绑定到新创建的跨度项目（jQuery）答案

【问题标题】：Not able to bind click event to newly created span items (jQuery)无法将点击事件绑定到新创建的跨度项目（jQuery）
【发布时间】：2009-06-05 07:39:42
【问题描述】：

我无法将事件绑定到由 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>

【问题讨论】：

哇，在 24 分钟编辑我的原始帖子后得到了这么多反馈！我现在会测试你的建议！

标签： jquery binding

【解决方案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);

【讨论】：

好的，我用这个替换我的代码。但是没有输出。使用“console.log(ul)”，输出为 [object object]。为什么只应用'/'结束标签？ jQuery 应用第一个标签？
抱歉，这只是一个片段。我来填。
啊哈！优秀的！我认为我不需要带有上述代码的 .html(ul) 。现在它输出一切。而且我在使用 jQuery 构建 html 结构方面更加明智。非常感谢！
注意：.click 末尾缺少一个 ')'。以为我应该为其他剪纸者提出这一点:)

【解决方案2】：

livequery 插件与 jQuery 1.2.6 配合使用，与 live() 事件基本相同（以及更多）

【讨论】：

【解决方案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.

【讨论】：

【解决方案4】：

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

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

或者 - 如果您特别询问 1.3 新增的实时功能，那么您可以为旧版本的 jQuery 使用名为 livequery 的 UI 插件。

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

所以是这样的：

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

乔尔格

【讨论】：

【解决方案5】：

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

由于您不能使用 live()，因此您必须在将列表附加到 #spanContainer 后手动重新绑定事件，如下所示：

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

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

【讨论】：

我已经测试了 jQuery("#7276").bind("click", function() { alert('test'); }) - 其中 #7276 是他的跨度 ID"按钮”。但什么也没发生。
嗯...你什么时候绑定事件？页面何时加载？您可能需要根据我上面的编辑重新绑定它们。

【解决方案6】：

上一层并使用 $(TheParent).on("click", ".someClass", function() { }) 定义您的事件

这适用于现有的和新创建的具有类 .someClass 的孩子

【讨论】：