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

I'm not able to bind events to a list that is generated by jQuery. I've looked at some similar issues, but havent found any solution.

我无法将事件绑定到由jQuery生成的列表。我看过一些类似的问题,但没有找到任何解决方案。

This is the code that generates my list:

这是生成我的列表的代码:

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);

This creates my wanted list. Works great. But I'm not able to manipulate the list trough jQuery. Some research points me in the direction of binding events to my list. How do I do that? I've looked at several posts having the same issue, but haven't found anything that solved my problem.

这创建了我想要的列表。效果很好。但我无法通过jQuery操纵列表。一些研究指出我将事件绑定到我的列表的方向。我怎么做?我看了几个有相同问题的帖子,但没有找到解决我问题的任何内容。

I'm using jQuery 1.2.6 and cannot use v.1.3 (which has the .live function).

我正在使用jQuery 1.2.6并且不能使用v.1.3(具有.live功能)。

Resources: docs.jquery.com/Events/bind

Edit: I've tried this, but it's not working.

编辑:我试过这个,但它没有用。

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

jQuery(“#7276”)。bind(“click”,function(){alert('test');})

This the the html output:

这个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>

6 个解决方案

#1

Try building the data structure in jquery: (untested code)

尝试在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);

#2

The livequery plugin works with jQuery 1.2.6 and does essentially the same as the live() event (and more)

livequery插件可以与jQuery 1.2.6一起使用,并且与live()事件基本相同(以及更多)

#3

I'm not sure what do you mean by manipulating list via jquery, but if you want bind some events handlers to elements of your list you can use:

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

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

this will add the onClick handler for all span elements in your list. Or you can access whatever you using:

这将为列表中的所有span元素添加onClick处理程序。或者您可以访问您使用的任何内容:

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

And if you want to access each list element separately after you have inserted it into DOM, you can do:

如果要在将每个列表元素插入DOM后单独访问它们,可以执行以下操作:

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

#4

I can't see the code where you assign the events to your list. You'd still want something like this:

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

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

Alternatively - if you're specifically asking about the live functionality new to 1.3, then you can use a UI plugin for an older version of jQuery called livequery.

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

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

So something like this:

所以这样的事情:

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

Joerg

#5

Hmm...that html function should work when appending your list to the #spanContainer.

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

Since you can't use live(), you'll have to manually re-bind the events after appending the list to #spanContainer like this:

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

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

(Also, the jQuery each() function could help you in generating that list...you may want to look into it)

(另外,jQuery each()函数可以帮助您生成该列表...您可能想要查看它)

#6

Go up one level and define your event using $(TheParent).on("click", ".someClass", function() { } )

上升一级并使用$(TheParent).on(“click”,“。someClass”,function(){})定义事件

This would work on existing and newly created children with class .someClass

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

#1