jQuery 提交错误的表单数据

Question

我正在使用 jQuery 来调出一个 jQuery UI 对话框，其中有一个表单。然后我使用 jQuery 的 ajax 函数来提交我的表单数据。问题就在这里......我在带有编辑按钮的表格中有一堆东西。此编辑按钮应该会打开 jQuery UI 对话框，以便我可以编辑字段并提交更改。

我进行更改，然后在提交过程中，它从表中的第一个链接提交数据。

这是我的 JS 代码的样子

$('.edit_task').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
    .load($link.attr('href'))
    .dialog({
        autoOpen: false,
        title: "Edit Task",
        width: 700,
        height: 550,
        modal: true,
        buttons: {
            "Save": function() {
                $.ajax({
                    url: $link.attr('href'),
                    type: "POST",
                    data: $("#EditTaskForm").serialize(),
                    dataType: "html",
                    async: true,
                    cache: false,
                    error: function()
                    {
                        alert("Error: An error occured while trying to update a task.");
                    },
                    success: function()
                    {

                        $(this).dialog('close');
                        location.reload();
                    }
                });
            },
            "Cancel": function () { $(this).dialog('close'); }
        }
});

$link.click(function() {
    $dialog.dialog('open');

    return false;
});
});

我已经尝试解决这个问题好几天了，但我似乎无法找出问题所在。

编辑:这是 HTML 表单 http://pastebin.com/knh1AVGk

Answer 1

罪魁祸首是这一行

var $dialog = $('<div></div>')

每当你 click在编辑链接上，上面的行正在创建一个新的 div并加载其中未附加到正文但 jQuery 的表单仍然将其保留在文档片段中。因此，下次当您单击编辑链接时，会出现一个新的 div创建并在文档片段中再次加载相同的表单。所以现在页面上有多个具有相同 id 的编辑表单，当您使用 $("#EditTaskForm").serialize() 时它总是会获取第一个表单数据。

解决方案是，您应该维护 div使用一些 id 或类在对话框中加载表单。试试这个代码。

$('.edit_task').each(function() {
    var $link = $(this);

    //This part of the code will fix the issue
    var $formContainer = $('#editFormContainer');
    if($formContainer.length == 0){
        $formContainer = $('<div id="editFormContainer"></div>')
                         .appendTo(document.body);
    }

    console.log($("#EditTaskForm").length);

    var $dialog = $formContainer
        .load($link.attr('href'))
        .dialog({
            autoOpen: false,
            title: "Edit Task",
            width: 700,
            height: 550,
            modal: true,
            buttons: {
                "Save": function() {
                    $.ajax({
                        url: $link.attr('href'),
                        type: "POST",
                        data: $("#EditTaskForm").serialize(),
                        dataType: "html",
                        async: true,
                        cache: false,
                        error: function()
                        {
                            alert("Error: An error occured while trying to update a task.");
                        },
                        success: function()
                        {

                            $(this).dialog('close');
                            location.reload();
                        }
                    });
                },
                "Cancel": function () { $(this).dialog('close'); }
            }
    });

    $link.click(function() {
        $dialog.dialog('open');

        return false;
    });
});