jquery - 使用 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”，但是当我第二次输入时，现在输入“goodbye”，将添加一个新的 div，但其中包含文本“hello”，而不是“goodbye”。

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

关于它为什么会这样工作有什么想法吗？ 谢谢

Answer 1

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

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

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