Question

I declared a button:

<button id="create" type="button">add div</button>

and I want to add a new div element to the document body everytime I click on the button using the jQuery UI dialog box, like this:

var form = $("<div>", {id:"form"});

    form.append(
        $("<input>")
            .attr({
                "type" : "text",
                "id" : "user-input"
            })
    )
    .dialog({
        width: 600,
        buttons: {
            "Ok": function() {
                var new_div = $("<div>").html($("#user-input").val()).addClass("destiny_div");
                new_div.appendTo($("body"));
                $(this).dialog("close");
            }}
    });

The first time I click on the button it works fine, but the second time, the text that I write into the input text box does not get updated with the new value, instead it takes the first placed value.

For example, if the first time I type “hello” and click on the “ok” button, a new div will be added to the body with the text “hello” in it, but when I do it a second time, now typing “goodbye”, a new div will be added, but with the text “hello” in it, instead of “goodbye”.

Here is the code I have: http://jsfiddle.net/vWQ9T/

Any ideas on why it is working like this?
Thanks

Answer 1

Your dialog is beeing appended every time you insert a div. So the second time you cliock the button, it still takes the first #user-input out of the first dialog. So you have to remove the form after closing the dialog by using the close-Parameter:

close: function () {
    form.remove()
}

Have a look on your update jsfiddle: http://jsfiddle.net/vWQ9T/1/