使用jQuery UI对话框获取的输入文本数据在第二个对话框打开后不更新其值

Question

我宣布了一个按钮:

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

每次我使用jQuery UI对话框单击按钮时,我想在文档正文中添加一个新的div元素,如下所示:

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");
            }}
    });

我第一次点击按钮它工作正常,但第二次,我写入输入文本框的文本没有使用新值更新,而是采用第一个放置的值.

例如,如果我第一次输入"hello"并单击"ok"按钮,则会在主体中添加一个新的div,其中包含文本"hello",但是当我第二次执行此操作时,现在键入"再见",将添加一个新的div,但文本中包含"hello",而不是"再见".

这是我的代码:http://jsfiddle.net/vWQ9T/

关于它为何如此工作的任何想法？谢谢

Answer 1

每次插入div时都会附加对话框.因此,第二次按下按钮时,它仍然会从第#user-input一个对话框中取出第一个按钮.因此,您必须在使用close-Parameter关闭对话框后删除表单:

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

看看你的更新jsfiddle:http://jsfiddle.net/vWQ9T/1/