Question

您好我正在使用jquery对话框，因为我需要一些带有所需数据的文本字段。

当我们单击一个按钮，然后包含4个输入文本字段并且这些输入必须根据数据自动完成时，将打开此对话框点击的按钮。

这里我创建了一个包含一个文本字段的代码，它的值来自valueofText，每次点击都会更新。我也用过控制台检查值是否正在更新。

我的代码是

        valueofText  = row //changes every time

        var $dialog = $('<div></div>')
          .html('<form>Enter email address <input id=emailAddresss type="text"></form>')
           .dialog({
               autoOpen: false,
               modal: true,
               height: 300,
               width: 500,
               draggable: false,
               title: "Some title",

               open: function (event, ui) {
                 //  $("#emailAddresss").val(valueofText);
               console.log("id is  "+valueofText);
                 document.getElementById('emailAddresss').value = valueofText;
               $(this).css('overflow', 'hidden');
               }
              });
             $("#emailAddresss").val('');
             $dialog.dialog('open');

我的问题是它只更新一次然后如果我们再次打开模态窗口它没有显示任何值。我在这里做错了什么？

Answer 1

我认为您在每次点击时创建对话框而不删除旧对话框。这意味着将更改第一个crated对话框的值（因为emailAddresss是一个id），该对象已关闭，但您正在打开一个新创建的对话框。

如果我是对的，你有两个选择：

在创建新对话框之前删除旧对话框。创建标识为var $dialog = $('<div id="myDialog"></div>')的对话框，在创建新对话框之前将其移除$('#dialog').remove();
仅在页面加载时创建一个对话框（更好地将其设置为html），并且仅在单击时更改emailAddress输入并打开对话框。

Answer 2

您应该获得当前对话框的emailAdresss子项，例如：

$(this).find('#emailAddresss').val(valueofText);

请参阅以下示例，其中我创建了4个对话框：

var html = '<form>Enter email address <input id="emailAddresss" type="text"></form>';

function openDialog(valueofText){
  var $dialog = $('<div></div>')
  .html(html)
  .dialog({
    autoOpen: false,
    modal: true,
    height: 200,
    width: 250,
    draggable: false,
    title: "Some title",

    open: function (event, ui) {
      console.log("id is  "+valueofText);
      $(this).find('#emailAddresss')
      .val(valueofText);
      $(this).css('overflow', 'hidden');
    }
  });
  $dialog.dialog('open');
}

for(valueofText=1; valueofText<5; valueofText++){
  openDialog(valueofText);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

每次更新文本字段值

2 个答案: