Appending jQuery UI Spinner Dynamically

Question

I'm having problems with the jQuery UI Spinner widget. It works fine when the input is added in the html; however, when I add the input dynamically it does not work. I created an example of the spinner not working when it is added dynamically here: jsfiddle example

function injectSpinner(){
    console.log("Injecting Spinner");

    var p = document.createElement('p');
    var label = document.createElement('label');
    var text = document.createTextNode("Select a value:");
    var input = document.createElement('input');

    label.appendChild(text);
    label.setAttribute("for", "spinner");
    p.appendChild(label);

    input.setAttribute("id", "spinner");
    input.setAttribute("name", "value");
    p.appendChild(input);

    $("#spinner").spinner();

    $("#moduleArea").append(p);
};

I have used this method with a lot of the other jQuery UI widgets and there seems to be no problem.

Answer 1

The input has to be part of the DOM before you call .spinner() on it.
So please call $("#moduleArea").append(p); before $("#spinner").spinner();
I have updated your fiddle accordingly.