Question

I am fairly new to jquery and I have a question about updating data within my page.

I have an Unordered List that I allow the user to manipulate. While the UL starts with only one list item, I allow the user to add objects to this array. I have a goal now to have the user click the object from the UL, which pulls that into a read only textarea, and another textarea to allow for the user to input a custom string and have the targeted list item’s (text()) become the custom string.

Now, I’m not confused as to how to pull the .text(), and I am pretty sure I can put the custom string the user creates INTO the chosen list item’s text attribute…

The problem I’m having is for example:

The page starts out with one single (blank) object in the array. I click “add object” and now the original array is changed to hold 2 objects or 3, etc. The objects that were added to this array are not “appearing” to my JQuery script. Only this first object will transfer its text to the textarea when clicked. Same goes for if I Initialize this array with, say 3 objects… only those three will be active.

I can show snippets of code if that will help. Or if you have questions, please ask and we’ll go from there, thanks.

My testing URL: http://whoneedsstandards.com/subdomains/travis/jquery.htm … maybe you can follow my step-by-step?

Code:

//add to list items//
    $('a#add').click(function () {
        $('<li id="' + i + '">Blank Object</li>' + i + '').appendTo('#ul1');
        i++;
        $('#ul1>li:even').addClass('alert');
        $('#ul1').load();
    });
//click list item to store in textarea//
    $('#ul1>li').click(function () {
        var temptext = ($(this).text());
        $('textarea#text1').text(temptext);

    });

Answer 1

Use the .live method to register your click handler.

var lastClickedLi;

$("#ul1 > li").live("click", function() {
    lastClickedLi = $(this);
});

See the fiddle for a more complete example.