Applying jQuery function to dynamically added item

Question

When adding a new textbox via jQuery append() function it appears jQuery is unable to apply a function to that textbox;

            $("#ulList").append("<li><span class=\"ui-icon ui-icon-circle-close remove\"/><em class=\"selectedWord\">" + selectedWord + "</em><input class=\"acf acfb-input ac_input\" type=\"text\" id=\"" + name + "\" name=\"" + name + "\" value = '' /></li>");

            $("#" + name).autoCompletefb();

The function I am attempting to apply to the newly added input is the autoCompletefb() method but it seems jQuery is unable to find the newly added object.

Ideas?

Answer 1

You're giving the input an ID of the contents of the name variable and selecting an element with an id of the contents of the formattedName variable. What is the difference between the two? The code would work if they are the same.

Besides that, you have a JS error near the end of the append() call:

value = \"\" />";+ "</li>");

Probably want it to be:

value='' /></li>");

Answer 2

You have a spare semicolon in the wrong place

 $("#ulList").append("<li><span class=\"ui-icon ui-icon-circle-close remove\"/><em class=\"selectedWord\">" + selectedWord + "</em><input class=\"acf acfb-input ac_input\" type=\"text\" id=\"" + name + "\" name=\"" + name + "\" value = \"\" />" + "</li>");

Answer 3

Make sure that your dynamically added input item is fully loaded before trying to access it on the page. also, do you have a variable mixup? You use "name" as a variable in the first line as "formattedName" as the variable in the second line.