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](http://jsfiddle.net/jwC7P/). Though i should probably point out that your first line `$("my-list").append....`**my-list** is missing a **#** — Tony, Mar 12 '13 at 12:36
do you bind the event handler after each `$("#my-list").append(buildListElementItem);` — Arun P Johny, Mar 12 '13 at 12:56
That edit helps. You are binding previous elements multiple times as mentioned below by @Evren Kuzucuoglu . You will have to bind just that specific list item as Evren suggests. — Tony, Mar 12 '13 at 21:54
so that not only fixes my problem, but it makes sense as well from context/learning perspective which helps me even more. thanks for taking the time to help guys! — Justin, Mar 14 '13 at 00:53

Evren Kuzucuoglu · Accepted Answer · 2013-03-12T12:47:42.560

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 '13 at 12:47

answered Mar 12 '13 at 12:36

Evren Kuzucuoglu

3,781
28
51

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. – Tony Mar 12 '13 at 12:43
Oh yes I hadn't seen he was using strings and not jQuery object. Will edit post accordingly using jquery element constructor. – Evren Kuzucuoglu Mar 12 '13 at 12:47
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! – ipruthi Aug 28 '13 at 02:49

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

1 Answers1

Linked