Question

我正在使用jQuery UI對話框輸入圖像的URL。我使用下面的方法：

<input id="dlg" value="Open Dialog" type="button" /> 

<script type="text/javascript"> 
var img = '<div id="dialog" title="Insert Image" style="width:500px;height:300px">'; 
img += '<table><tr><td style="width:100px">'; 
img += 'Image URL: </td><td><input id="txt" type="text" value="" size="52" /></td>'; 
img += '</tr></table></div>'; 

$('#dlg').click(function(){ 

$(img).dialog({buttons: {'Ok':function(){ 
    var value = $("#txt").val(); 
    var http = value.substr(0,7); 

    alert(value); 

    $(this).dialog('close'); 
}}}, 

{ closeOnEscape:true, resizable:false, width:600, height:200 

}); 


}); 
</script> 

當我按下按鈕(<input id="dlg" value="Open Dialog" type="button" />)出現一個對話框，一個文本框輸入字段。當我在文本字段中輸入任何值時，它會提示該值。但是，當我按下第二次或第三次按鈕並在對話框的文本框中輸入其他值時，按確定，它會提醒我第一次輸入的值。所以，無論我點擊多少次按鈕並輸入任何值，它都會提醒我第一次輸入的值。

我是否正確使用此方法獲取文本框值var value = $("#txt").val();？ 如果是，那麼它爲什麼會給我第一次輸入的值。

注意：我清除了瀏覽器的緩存很多次，所以不會有任何緩存問題。

Answer 1

問題是每次你打電話給你時，你正在做一個對話框的新副本。這意味着你有多個具有相同名稱的元素。爲了避免這種情況，您需要在關閉對話框後銷燬該對話框。

變化：

$(this).dialog('close'); 

要

$(this).dialog('close').dialog("destroy"); 

另一種選擇是一次比重新使用它創建的元素。

Answer 2

在我看來，txt項目正在多次創建。完成後，您需要從DOM中移除項目。

在本節

$(img).dialog({buttons: {'Ok':function(){ 
    var value = $("#txt").val(); 
    var http = value.substr(0,7); 

    alert(value); 

    // save value somewhere 

    $("#txt").remove(); 

    $(this).dialog('close'); 
}}}, 

Answer 3

這是因爲你正在創建每次創建對話框時DOM結構，所以它是您每次請求$("#txt")時間獲取創建的第一個輸入框。

因此，解決方法是刪除在widget的接近完整DOM結構

$(img).dialog({ 
    buttons: { 
     'Ok':function(){ 
      var value = $("#txt").val(); 
      var http = value.substr(0,7); 

      alert(value); 

      $(this).dialog('close'); 
     } 
    }, 
    close: function(){ 
     $(this).remove() 
    }, 

    closeOnEscape:true, 
    resizable:false, 
    width:600, 
    height:200 
}); 

Answer 4

無論多少次我按一下按鈕，輸入任何值，它會提醒我輸入的值第一次。

我是否正確使用此方法獲取文本框值var value = $("#txt").val();？

是的。

如果是，那麼爲什麼它給我第一次輸入的值。

因爲$("#txt")引用了具有該id的DOM中的第一個元素。在每次點擊時，您都會動態創建img字符串中的元素，並通過dialog小部件將它們附加到DOM。然而，調用它的close方法只隱藏它們，但不會將它們從DOM中刪除，因此點擊處理程序始終會從第一個創建的輸入中提取它的value。

嘗試調用destroy method代替：

$(this).dialog('close').dialog("destroy"); // not sure whether the "close" is still necessary 

或者你創建對話框只有一次，open它的每一次點擊。