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! }

Answer 1

When you say "there is no each", you omit that $("#my-list li") is a jQuery selector, ie 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.