如何改善取消按钮的行为并使关闭与取消相同？

Question

我正在设置一个小 window 用于设置和更新 Web 应用程序中不同模块的参数，为此，我使用了一个 jQueryUI 对话框，该对话框当时从每个模块加载设置。我的问题是，如果您点击取消按钮，它会将所有配置重置为初始状态，即使我之前进行了更改并在再次打开对话框并取消之前保存了它们。
此外，我希望关闭 'X' 按钮具有与取消按钮相同的行为。

    var appDiv = $(Container).find(".divAppAdmin")[0];
var backupDiv = appDiv.innerHTML;

var closedFunction = function() {
    $(appDiv).dialog( "destroy" );
};
var closeFunction = function() {
    $(appDiv).dialog( "close" );
    $(Container).append(appDiv);
};
var cancelFunction = function() {
    $(appDiv).dialog( "close" );
    appDiv.innerHTML = backupDiv;
    $(Container).append(appDiv);
}
$(appDiv).dialog({
    "modal": true,
    "title": "Edit",
    "close": closedFunction,
    "buttons": {
        "Save": closeFunction,
        "Cancel": cancelFunction
    },
    "minWidth": 600
});

一步一步：
1.打开对话框，引入一些变化，
2.保存修改，
3.再次打开对话框，不做任何修改，
4. 点击取消按钮。
此时，我丢失了之前所做的更改并在第 2 步中保存，模块返回到第 1 步之前的状态。

我知道使用

    appDiv.innerHTML = backupDiv;

在这种特定情况下导致更改丢失，但如果我真的想撤消任何修改，它工作正常。

编辑:
我一直在挖掘，到目前为止，我找到了将取消行为复制到关闭 'X' 按钮 (How to find out if jquery dialog was closed on escape and execute some code) 的解决方案：

 var closedFunction = function (event, ui) {
    if (event.originalEvent) {
        cancelFunction();
    }
    $(appDiv).dialog("destroy");
};

通过在 closedFunction() 中添加此 if 子句，我可以在单击 'X' 按钮或按 ESCAPE 键关闭对话框时进行捕获，然后我可以在if 和 now 与点击取消按钮相同。

Answer 1

考虑这个 semi-basic 示例。

$(function() {
  var appDiv = $("#appDialog");

  function editSetting(s) {
    $(".setting-id", appDiv).val(s.id);
    $(".setting-name", appDiv).html(s.label);
    $(".setting-value", appDiv).val(s.value);
    appDiv.dialog("open");
  }

  function saveSetting() {
    var sid = $(".setting-id", appDiv).val();
    var v = $(".setting-value", appDiv).val();
    $("#" + sid).data("value", v);
  }

  function resetDialog() {
    $(".setting-id", appDiv).val("");
    $(".setting-name", appDiv).html("");
    $(".setting-value", appDiv).val("");
  }

  appDiv.dialog({
    autoOpen: false,
    modal: true,
    minWidth: 300,
    buttons: [{
      text: "Save",
      icon: "ui-icon-check",
      class: "ui-priority-primary",
      click: function() {
        saveSetting();
        appDiv.dialog("close");
      }
    }, {
      text: "Cancel",
      icon: "ui-icon-close",
      click: function() {
        appDiv.dialog("close");
      }
    }],
    close: function(e, ui) {
      resetDialog();
    }
  });

  $(".app .edit-setting").button().click(function(e) {
    var that = $(this).parent();
    var setting = {
      id: that.attr("id"),
      label: $("label", that).text(),
      value: that.data("value")
    };
    editSetting(setting);
  });

  $("form", appDiv).submit(function(e) {
    e.preventDefault();
    saveSetting();
    appDiv.dialog("close");
  });

  $(".app > .save").button().click(function() {
    var settings = {};
    $(".app li").each(function(ind, el) {
      var k = $(el).attr("id");
      var v = $(el).data("value");
      settings[k] = v;
    });
    //Save Settings to Storage
    console.log(settings);
  });
});

.app ul {
  margin: 10px;
  padding: 0;
  list-style: none;
  width: 300px;
}

.app ul li {
  border: 1px solid #CCC;
  padding: .5em;
  margin-bottom: -1px;
}

.app ul li:first-child {
  border-radius: 3px 3px 0 0;
}

.app ul li:last-child {
  border-radius: 0 0 3px 3px;
}

.app ul li label {
  display: inline-block;
  width: 200px;
}

.app .save {
  margin-left: 10px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="app ui-widget">
  <ul>
    <li id="set-1" data-value="A"><label>Setting 1</label><button class="edit-setting">Edit</button></li>
    <li id="set-2" data-value="B"><label>Setting 2</label><button class="edit-setting">Edit</button></li>
    <li id="set-3" data-value="C"><label>Setting 3</label><button class="edit-setting">Edit</button></li>
  </ul>
  <div id="appDialog" class="appDiv" title="Edit Setting">
    <form>
      <input type="hidden" class="setting-id" />
      <label class="setting-name"></label>: <input type="text" class="setting-value" />
    </form>
  </div>
  <button class="save">Save Settings</button>
</div>

如果我们将对话框视为容器或模板，我们可以用各种数据填充单个对话框。然后就是打开关闭的问题了

单击 'Edit' 按钮时，当前设置和值会在对话框打开之前加载到对话框中。点击 'X' 或按 'Cancel' 关闭对话框而不保存。用 <form> 包装我们的条目允许我们使用 Enter 提交表单或单击 'Save'。两者都配置为在关闭对话框之前保存值。

我在关闭回调中添加了一个重置函数，因此无论何时关闭对话框，它都会清除所有旧数据。这并不是完全需要的，因为当我们打开对话框时，它会将数据填充到字段中。

我们必须将值存储在某个地方。对于这个例子，我使用 data 属性。它可以作为 HTML 的一部分添加并由 jQuery 读取。它不是持续的。您可以看到一个最终保存按钮，这可以读取新值并将它们推送到 localStorage 或数据库。

希望对您有所帮助。

如何改善取消按钮的行为并使关闭与取消相同？

How to improve cancel button behavior and make the close to work the same as cancel?

jquery-ui

jquery-ui-dialog

innerhtml