输入通过jQuery UI对话框获得的文本数据，在第二个对话框打开后不更新其值

我宣布了一个按钮：

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

添加div

每次使用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");
            }}
    });

var form=$（“”，{id:“form”}）；
form.append(
$("")
艾特先生({
“类型”：“文本”，
“id”：“用户输入”
})
)
.对话({
宽度：600，
按钮：{
“Ok”：函数（）{
var new_div=$（“”）.html（$（“#用户输入”）.val（））.addClass（“destiny_div”）；
新附页（$（“正文”）；
$（此）.dialog（“关闭”）；
}}
});

第一次单击按钮时效果良好，但第二次，我写入输入文本框的文本不会用新值更新，而是采用第一个放置的值

例如，如果我第一次键入“hello”并单击“ok”按钮，将在正文中添加一个新div，其中包含文本“hello”，但当我第二次键入“再见”时，将添加一个新div，但其中包含文本“hello”，而不是“再见”

以下是我的代码：

你知道为什么会这样吗？

---

谢谢

每次插入div时，您的对话框都会被追加。因此，当您第二次点击按钮时，它仍然会将第一个

#用户输入

从第一个对话框中取出。因此，在关闭对话框后，必须使用close参数删除表单：

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

查看您的更新JSFIDLE：