無法在jQuery UI對話框中獲取textarea的值

Question

我試圖在對話框中放置一個textarea，如果單擊“確定”，但我想獲取該textarea的值，但我無法獲取該值。 可能是什么問題？

 $(document).on('click', '#open', function () { var txt = $('#txt').val(); $('#break-diag').dialog({ modal: true, title: 'Dialog', show: { effect: "scale", duration: 200 }, resizable: false, buttons: [{ text: "ok", click: function () { console.log(txt); } }] }); }); 

 #break-diag{ display:none; } 

 <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <button id="open">Open Dialog</button> <div id="break-diag"> <textarea id="txt"></textarea> </div> 

Answer 1

單擊打開即可捕獲textarea值； 在此事件期間將為空。

單擊確定即可捕獲該值

click: function () {
       var txt = $('#txt').val();
       console.log(txt);
}

Answer 2

對話框打開時，您正在嘗試獲取文本。 那里還沒有文字。

 $(document).on('click', '#open', function () { $('#break-diag').dialog({ modal: true, title: 'Dialog', show: { effect: "scale", duration: 200 }, resizable: false, buttons: [{ text: "ok", click: function () { var txt = $('#txt').val(); console.log(txt); } }] }); }); 

 #break-diag{ display:none; } 

 <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <button id="open">Open Dialog</button> <div id="break-diag"> <textarea id="txt"></textarea> </div> 

Answer 3

$(document).on('click', '#open', function () { 
    $('#break-diag').dialog({
        modal: true,
        title: 'Dialog',
        show: {
            effect: "scale",
            duration: 200
        },
        resizable: false,
        buttons: [{
            text: "ok",
            click: function () {
              var text=  $('#txt').val();
                alert(text);
            }
        }]
    });
});

Answer 4

您設置CSS樣式顯示： ＃break-diag DIV設置為none 。

所以你怎么能想象任何東西都可以顯示。

因此，當您單擊按鈕時， display：none屬性應從＃break-diag DIV中刪除。