Question

我有一个弹出对话框，旨在允许用户将Excel工作表中的数据粘贴到服务器端脚本中进行解析。（很长一段时间。）但是，我今天发现了一个完全不同的问题，如果你试图多次使用它而不刷新页面，jQuery将在你第一次提交时继续提交文本框中的内容。< / p>

这是表示问题的小提琴：http://jsfiddle.net/prjg4u6w/3/

运行它，点击＆＃34;上传＆＃34;按钮，然后键入＆＃34; foo＆＃34;。然后点击＆＃34;上传＆＃34;再次按下按钮并键入＆＃34; bar＆＃34;。结果只是连接你键入的任何文本，所以很明显它应该说＆＃34; foo bar＆＃34;，但它出现为＆＃34; foo foo＆＃34;。适用于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

您的代码生成了多个对话框，但基于ID的选择器只返回第一个！

http://jsfiddle.net/prjg4u6w/4/

这个使用类来突出显示问题，并在每次上传后报告额外匹配：

// Paste in a TSV file for processing on the server
function uploadTSV() {
    alert($(".uploadTSVText").length);
    var data = $(".uploadTSVText").val();
    console.log(data);
    $("#result").html($("#result").html() + " " + data)
}

请注意，这是否是每次删除对话框的正确方法，但它会再次使用id：

http://jsfiddle.net/prjg4u6w/7/

    buttons: [{
        text: 'Hold on to Your Butts',
        click: function () {
            uploadTSV();
            $(this).dialog("close");
            $(this).remove();
        }
    }, {
        text: 'Cancel',
        click: function () {
            $(this).dialog("close");
            $(this).remove();
        }
    }]

注意：Bingo采用了这种方式，并采用了更好的方法来重复使用对话框。

Answer 2

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

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

看到它在这里工作：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');
    });

jQuery .val（）没有返回textarea的更新值

2 个答案: