Geek Answers Handbook

Failed to bind click event to newly created span elements (jQuery)

I cannot bind events to the list generated by jQuery. I examined some similar problems, but havent found any solution.

This is the code that my list generates:

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 list. It works great. But I can not manipulate the list through jQuery. Some studies point me towards linking events to my list. How should I do it? I looked through several posts having the same problem, but did not find anything that resolved my problem.

I am using jQuery 1.2.6 and cannot use v.1.3 (which has a .live function).

Resources: docs.jquery.com/Events/bind

Edit: I tried this, but it does not work.

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

This 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>
0
source share
6 answers

Try creating a data structure in jquery: (unverified 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);
+5
source

The livequery plugin works with jQuery 1.2.6 and essentially coincides with the live () event (and more)

0
source

I'm not sure what you mean by manipulating the list through jquery, but if you want to associate some event handlers with the elements of your list, you can use:

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

this will add an onClick handler for all span elements in your list. Or you can access those you use:

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

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

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

Hmm ... this html function should work when adding your list to #spanContainer.

Since you cannot use live (), you will have to manually bind events after adding the list to #spanContainer as follows:

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

(Also, the jQuery each () function can help you create this list ... you can look in it)

0
source

I do not see the code in which you assign events to your list. You still want something like this:

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

Alternatively, if you specifically ask about the new live 1.3 features, then you can use the user interface 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). ...; });

Jörg

0
source

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

This will work with existing and newly created children with .someClass

0
source

More articles:


All Articles