Javascript 缓存jQuery UI对话框中的表单。

我是一名C/C++程序员，不熟悉javascript。下面的代码让我很伤心，我真的不知道我做错了什么。我已经搜索过了，找不到其他人有同样问题的地方

我已经完成了我的项目，删除了我的问题代码，试图理解并修复它。简短的版本是当我在HTML页面上单击我的“输入数据”图像时，它会创建一个带有表单和输入表（带有默认数据）的对话框，然后我输入/更改一些数据。当我单击对话框保存按钮时，它会通过JSON.stringify（$（“#form'）.jsonify（））来收集表单数据，并显示一个显示我输入的数据的警报框。这部分很好用

如果我再次单击“输入数据”图像，则会出现对话框，并输入/更改新数据。当我单击对话框保存按钮时，它会弹出一个警报框，显示我以前保存的数据（在本例中显示在警报框中）

无论我尝试了多少次，它总是从第一个条目返回数据，而从不返回任何新的（er）数据

我做错了什么

一些参考资料：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/Scripts/test.js"></script>

<link href="~/Content/jquery/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />

我的HTML代码

<div>
<img id="additem"
        Title="Add Item"
        onclick="addstuff(this)"
        OnMouseOver="this.style.cursor='pointer';"
        OnMouseOut="this.style.cursor='default';"
        src="~/images/Sign_Add_Icon_32.png" />
</div>

我的test.js文件

$.fn.jsonify = function (options) {
    var settings = $.extend({
        stringify: false
    }, options);
    var json = {};
    $.each(this.serializeArray(), function () {
        if (json[this.name]) {
            if (!json[this.name].push)
                json[this.name] = [json[this.name]];
            json[this.name].push(this.value || '');
        } else
            json[this.name] = this.value || '';
    });
    if (settings.stringify)
        return JSON.stringify(json);
    else
        return json;
}

function addstuff(obj) {
    var strHtml = "";
    var strHtml = "<div class=\"container\" id=\"addphonedlg\" title=\"Add Phone\" overflow:\"auto\">"
                     + "<p>Please enter the following information.</p>"
                     + "<form id=\"form\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"

                     + "<tr><td align=\"right\"><label for=\"name\">" + "Data 1" + ":</label></td>"
                     + "<td><input type=\"text\" name=\"" + "data1" + "\" style=\"border:0; color:#f6931f; font-weight:bold; align=right;\" VALUE=\"" + "Data 1 data" + "\" />" + "</td></tr>"
                     + "<tr><td align=\"right\"><label for=\"name\">" + "Data 2" + ":</label></td>"
                     + "<td><input type=\"text\" name=\"" + "data2" + "\" style=\"border:0; color:#f6931f; font-weight:bold; align=right;\" VALUE=\"" + "Data 2 data" + "\" />" + "</td></tr>"
                     + "<tr><td align=\"right\"><label for=\"name\">" + "Data 3" + ":</label></td>"
                     + "<td><input type=\"text\" name=\"" + "data3" + "\" style=\"border:0; color:#f6931f; font-weight:bold; align=right;\" VALUE=\"" + "Data 3 data" + "\" />" + "</td></tr>"

                     + "</table></form>"
                     + "</div>";

    $(strHtml).dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        buttons: {
            "Save": function () {
                alert("Add information " + JSON.stringify($('#form').jsonify()));
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        open: function () {
            $(this).siblings('.ui-dialog-buttonpane').find("button:contains('Cancel')").focus();
        }
    }).dialog('open');
}

$.fn.jsonify=函数（选项）{
变量设置=$.extend({
严格化：错误
}，选项）；
var json={}；
$.each（this.serializeArray（），函数（）{
if（json[this.name]）{
如果（！json[this.name].push）
json[this.name]=[json[this.name]]；
json[this.name].push（this.value | |“”）；
}否则
json[this.name]=this.value | |“”；
});
if（settings.stringify）
返回JSON.stringify（JSON）；
其他的
返回json；
}
函数addstuff（obj）{
var strHtml=“”；
var strHtml=“”
+“请输入以下信息。
”
+ ""
+“+”数据1“+”：
+ "" + ""
+“+”数据2“+”：
+ "" + ""
+“+”数据3“+”：
+ "" + ""
+ ""
+ "";
$（strHtml）.对话框({
自动打开：错误，
宽度：400，
莫代尔：是的，
按钮：{
“保存”：函数（）{
警报（“添加信息”+JSON.stringify（$（'#form'）.jsonify（））；
$（此）.dialog（“关闭”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
},
打开：函数（）{
$（this）.sides（'.ui dialog buttonpane'）.find（'button:contains（'Cancel'）））.focus（）；
}
}).对话框（“打开”）；
}

这似乎是缓存ui对话框中表单的已知问题。但是您需要删除

对话框

的表单

onClose

。 我在代码中添加了关闭事件函数。你现在应该没事了

    $(strHtml).dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        close: function( event, ui ) {
            $('#form').remove(); // this where the problem is
        },
        buttons: {
            Save: function () {
                alert("Add information " + JSON.stringify($('#form1').jsonify()));
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        open: function () {
            $(this).siblings('.ui-dialog-buttonpane').find("button:contains('Cancel')").focus();
        }
    }).dialog('open');
}

---

这听起来真是居高临下，但你有没有办法用一个有效的例子来说明你的问题？你的问题看起来很简单，但如果你不能解决这些问题，那么尝试解决它们真的很烦人。我同意@Reck。JSFIDLE会帮助我们更快地帮助您。我会试试看。我最近才了解到jsfiddle，我在让javascript“addstuff”甚至在点击jsfiddle时执行时遇到问题。请尝试清除上面指定元素字符串的strHtml。即，var strHtml=“”；strHtml=“老兄，非常感谢。这解决了我的问题。我非常感谢你付出努力来研究、发现和解释这个问题。