JQuery (this).text is not appending via click

Question

Poorly worded question, but I can't find a better way. Also, checked the 'related' questions and none solve this issue.

I am using JQuery 1.4.2, and JQueryUI 1.8.1.

I have a list of "buttons", and I want those buttons to make a copy of themselves in another list on the page. Here is what I have so far:

        $("#actionList ul > li > p").button({
            icons: {
                primary: 'ui-icon-document'
            },
            text: true
        }).click(function () {
            $('#callFlow').find(".placeholder").remove();
            $("<li></li>").text((this).text).appendTo('#callFlow');
        });

#actionList is the DIV for the unordered list I have. P contain "button" effect.

#callFlow is the DIV for the ordered list, which contains a single li with the class of placeholder.

Most of this is from the shopping cart demo on the JQuery UI site. But I've gone away from draggable/droppable, and simply want the user to click the button and have it "duplicated" in the other list. No sorting is needed, as it's a flow building application that will eventually load an AJAX div based on the button you click.

Any assistance is great. I hope I was clear enough in describing the issue.

Answer 1

When getting (or setting) the text you need to call the function, like this:

$("<li></li>").text($(this).text()).appendTo('#callFlow');

When you call $(this).text it's just a reference to the function, you want to actually execute the function and get the result, so use $(this).text().