jQuery .val() 不返回文本区域的更新值

Question

我有一个弹出对话框，旨在允许用户将 Excel 工作表中的数据粘贴到服务器端脚本进行解析。 (长话短说。)然而，我今天在处理一个完全不同的问题时发现，如果您尝试多次使用它而不刷新页面，jQuery 将继续提交您第一次提交时文本框中的所有内容。

这是一个显示问题的 fiddle :http://jsfiddle.net/prjg4u6w/3/

运行它，单击“上传”按钮，然后输入“foo”。然后再次点击“上传”按钮并输入“bar”。结果只是连接您输入的任何文本，所以显然它应该说“foo bar”，但它显示为“foo foo”。在 Chrome 37 和 Firefox 32 上都会发生。

我怀疑这可能与我创建对话框的方式有关:

$("#tabs").on('click', '#uploadTSV', function () {
    var opts = {
        title: 'Upload TSV',
        appendTo: '#tabs',
        width: 500,
        datatype: 'html',
        buttons: [{
            text: 'Hold on to Your Butts',
            click: function () {
                uploadTSV();
                $(this).dialog("close");
            }
        }, {
            text: 'Cancel',
            click: function () {
                $(this).dialog("close");
            }
        }]
    };
    var dia = $("<div></div>");
    var txt = '<p>Paste file here</p><textarea id="uploadTSVText" style="width: 100%; height: 50px;"></textarea>';
    dia.html(txt).dialog({
        title: opts.title,
        appendTo: opts.appendTo,
        width: opts.width,
        buttons: opts.buttons
    });
});

但我不明白为什么这会产生影响，并且当我不理解问题时，我会犹豫是否要处理它。

Answer 1

每次单击 #uploadTSV 时，您都会创建一个新的相同对话框。您的 uploadTSV() 函数正在从 $('#uploadTSVText') 的第一个实例中选择值，该实例始终是您打开的第一个实例。

如果配置正确，您可以创建模式的实例并重新使用它。在此示例中，我只是将 autoOpen 设置为 false 并创建了一个关闭函数，以便在每次关闭对话框时清除文本框。

在这里查看它的工作情况:http://jsfiddle.net/prjg4u6w/9/

    // Paste in a TSV file for processing on the server
    function uploadTSV() {
        var data = $("#uploadTSVText").val();
        console.log(data);
        $("#result").html($("#result").html() + " " + data)
    }
     var opts = {
            title: 'Upload TSV',
            appendTo: '#tabs',
            width: 500,
            datatype: 'html',

            buttons: [{
                text: 'Hold on to Your Butts',
                click: function () {
                    uploadTSV();
                    $(this).dialog("close");
                }
            }, {
                text: 'Cancel',
                click: function () {
                    $(this).dialog("close");
                }
            }]
        };
        var dia = $("<div></div>");
        var txt = '<p>Paste file here</p><textarea id="uploadTSVText" style="width: 100%; height: 50px;"></textarea>';
        var mydialog = dia.html(txt).dialog({
            title: opts.title,
            appendTo: opts.appendTo,
            autoOpen:false,
            close: function(){$("#uploadTSVText").val('')},
            width: opts.width,
            buttons: opts.buttons
        });

    // Dialog box
    $("#tabs").on('click', '#uploadTSV', function () {
        mydialog.dialog('open');
    });