Not able to bind click event to newly created span items (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.

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.

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

Resources: docs.jquery.com/Events/bind

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

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

This the the html output:

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

回答1:

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

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)

回答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:

$("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:

$("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:

$( "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.

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.

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

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)

回答6:

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

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

来源：https://stackoverflow.com/questions/954687/not-able-to-bind-click-event-to-newly-created-span-items-jquery

标签

jquery

binding