jQuery .val（）不返回文本區域的更新值

我有一個彈出式對話框，旨在允許用戶從Excel工作表中粘貼數據，以便由服務器端腳本解析。（長篇故事）但是，我今天發現了一個完全不同的問題，即如果你嘗試多次使用它而不刷新頁面，jQuery將會在你第一次提交它時繼續提交文本框中的任何東西。jQuery .val（）不返回文本區域的更新值

這裏的顯示問題小提琴：http://jsfiddle.net/prjg4u6w/3/

運行它，點擊「上傳」按鈕，然後鍵入「富」。然後再次點擊「上傳」按鈕並輸入「bar」。結果只是連接你鍵入的任何文本，所以顯然它應該說「foo酒吧」，但它出現爲「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 
    }); 
});

，但我看不出爲什麼是應作出當我不明白問題時，我會猶豫不決。

來源

2014-09-19 flyingGhoti

+1富富...（有時事情並不跨文化翻譯好）:) – 2014-09-19 15:18:39

哪裏是你的uploadTSV（）函數？ – artm 2014-09-19 15:20:59

您每次點擊#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'); 
    });

來源

2014-09-19 15:34:29 bingo

您的代碼正在生成多個對話框，但基於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) 
}

注意確保

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(); 
     } 
    }]

0：，但它再次與ID的工作原理

注意：Bingo採取了這種方式並應用了一種更好的重用對話框的方法。

來源

2014-09-19 15:22:39

jQuery .val（）不返回文本區域的更新值

回答

相關問題