Question

我尝试创建动态对话框，包含一个输入字段和一些文本。问题是，该对话框会记住旧输入字段的值，而不是更新它们。我创建了JSfiddle我的问题的例子。如果单击<li>元素，则会出现对话框。有一个输入字段，即更改<li>元素的内容和一些无意义的文本。如果，当您更改输入字段的内容并保存它时，问题就会从此时停止变为动态并变为纯静态字段。我完全不明白为什么。 PS抱歉我的英文不好

HTML

 <div id="dialog" title="text">
        <input type="text" id="xxx" value="test">Some text
    </div>
    <ul>
         <li id="menu-item-1">one</li>
         <li id="menu-item-2">two</li>
         <li id="menu-item-3">three</li>
     </ul>

JavaScript

$('li').click(function () {
    $('#xxx').attr("value", $(this).text());
    $("#dialog").dialog('open').data("opener", this.id);
});

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Save: function () {
            $('#' + $("#dialog").data("opener")).text($("#xxx").val());
            $(this).dialog('close');
        },
        Storno: function () {
            $(this).dialog('close');
        }
    }
});

jsfiddle

Answer 1

将对话框更改为<form>，然后使用其reset()方法。

＆＃13;

$('li').click(function() {
  $('#xxx').attr("value", $(this).text());
  $("#dialog").dialog('open').data("opener", this.id);
});

$("#dialog").dialog({
  autoOpen: false,
  modal: true,
  buttons: {
    Save: function() {
      $('#' + $("#dialog").data("opener")).text($("#xxx").val());
      $(this).dialog('close');
      this.reset();
    },
    Storno: function() {
      $(this).dialog('close');
      this.reset();
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<form id="dialog" title="text">
  <input type="text" id="xxx" value="test">Some text</form>
<ul>
  <li id="menu-item-1">one</li>
  <li id="menu-item-2">two</li>
  <li id="menu-item-3">three</li>
</ul>

＆＃13;

Answer 2

我认为您可以通过在输入上使用jquery val（）方法设置输入值，轻松实现您想要实现的目标。

这就是我的意思

更改此

$('#xxx').attr("value", $(this).text());

到这个

$('#xxx').val($(this).text());

这是一个有效的jsfiddle http://jsfiddle.net/gzx3z6e5/

禁用jQuery对话框内存

2 个答案: