禁用 jQuery 对话框内存

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() 方法。

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

<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>

Answer 2

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

这就是我的意思

改变这个

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

至此

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

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

禁用 jQuery 对话框内存

Disable jQuery dialog memory

jquery-ui