Not able to bind click event to newly created span items (jQuery)

Question

Hi guys.

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

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

Answer 2

You must append the elements to the DOM before you can bind to them.

See docs on append() and appendTo() jquery calls.

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

Answer 4

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

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

Answer 6

Hi Steven,

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