Question

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>

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