jquery: dynamically appending li items to ul then adding click, but click runs through each li

Question

So I may be approaching this wrong as I am learning but I can't seem to figure out what I am doing wrong here (probably simple mistake but I am having trouble). So I am trying to have a within the markup, a button click that allows selection from dialog and the submit button on the dialog includes call to custom function that does some logic then appends string to the like:

buildListElementItem += "<li>something</li>";
$("#my-list").append(buildListElementItem);

then bind click because i need each of these list items to be representative of a selection panel type thing

$("#my-list li").bind('click', function () {
   //processing stuff
});

everything works fine but if I add more than one item to this list (one after another) and you click a single item, it rolls through each one, which confused me because there is no each and I think this should only add it to a single item....

so there is a bunch more to this function/etc but I think my approach right here is wrong??

I have tried modifying the selector to like a class that I add in the string for the li, I have tried using .on, .live, .delegate or anything I could find instead of bind click.

Perhaps this is simple approach type error to trying to perform this but I would great appreciate any help, advice, etc on this.

EDIT: just adding more for clarification

Dialog allows users to select item from select/drop down, and button click (jquery ui) has function that calls below idea to add the item to a list element, which serves as selection panel. So they can populate items needed on panel, then click each item to populate and associate data with that item.

function addNewListItem(passedType)
{
    var buildListElementItem = "<li>" + passedType + "</li>";
    $("#my-list").append(buildListElementItem);
    $("#my-list li").bind('click', function () {
       otherStuff();
});

if I do the above I am guessing that this cause every element to get binded over and over again? not sure, but this works with the exception that when I click a single li item on that panel, it processes for all li items on the panel (otherStuff function). So I think from the examples I am starting to understand the issue or why this won't work, but how would I approach what I am trying to do then? always appreciated guys! }

I can't seem to replicate this problem. I have a fiddle here: jsFiddle. Though i should probably point out that your first line $("my-list").append....**my-list** is missing a # — Tony
– Tony, Commented Mar 12, 2013 at 12:36
do you bind the event handler after each $("#my-list").append(buildListElementItem); — Arun P Johny
– Arun P Johny, Commented Mar 12, 2013 at 12:56

Evren Kuzucuoglu · Accepted Answer · 2013-03-12 12:47:42Z

2

When you say "there is no each", you omit that $("#my-list li") is a jQuery selector, i.e. it returns all the elements that match the expression: in this case, all the li items within the child tree of #my-list. Thus, when you call bind, it is going to bind to each li item that has already been added to the element.

What you are looking for is something along this:

buildListElementItem = $("<li>something</li>"); //constructs a jquery object you can bind to
buildListElementItem.bind('click', function () {
   //processing stuff
});
$("my-list").append(buildListElementItem);

This way, you bind before the element has been added.

edited Mar 12, 2013 at 12:47

answered Mar 12, 2013 at 12:36

Evren Kuzucuoglu

3,9052 gold badges32 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tony Over a year ago

I assume his buildListelementItem is a string type and not a jQuery object so you can't call .bind() on it. But you make a good point that he could have previously been binding events to older items and then double binding. In which case he can call an .unbind() method.

Evren Kuzucuoglu Over a year ago

Oh yes I hadn't seen he was using strings and not jQuery object. Will edit post accordingly using jquery element constructor.

ipruthi Over a year ago

I'm stuck developing on a system still using jQuery 1.6 and using live to bind events was not possible. After hours of searching (and failing) to implement using .live, I finally found your solution and it works a treat! Upvotes for you, sir!

Collectives™ on Stack Overflow

jquery: dynamically appending li items to ul then adding click, but click runs through each li

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related