jquery ui 对话框需要返回值，当用户按下按钮时，但不起作用

使用jQuery UI对话框创建一个弹出窗口，并在用户按下按钮时返回值，可能会遇到一些问题。在某些情况下，按钮点击事件不会触发，导致返回值无法获取。本文将探讨这个问题，并提供解决方案。

html
  
这是一个对话框。
打开对话框

javascript
$("#myDialog").dialog({
  autoOpen: false,
  modal: true,
  buttons: {
    "确定": function() {
      $(this).dialog("close");
    },
    "取消": function() {
      $(this).dialog("close");
    }
  }
});
$("#openDialog").click(function() {
  $("#myDialog").dialog("open");
});

javascript
$("#openDialog").click(function() {
  var deferred = $.Deferred();
  $("#myDialog").dialog({
    autoOpen: true,
    modal: true,
    buttons: {
      "确定": function() {
        var inputValue = $("#inputField").val(); // 获取输入的值
        $(this).dialog("close");
        deferred.resolve(inputValue); // 解析Deferred对象并传递输入的值
      },
      "取消": function() {
        $(this).dialog("close");
        deferred.reject(); // 解析Deferred对象为失败状态
      }
    },
    close: function() {
      deferred.reject(); // 对话框关闭时也解析Deferred对象为失败状态
    }
  });
  return deferred.promise(); // 返回Deferred对象的promise
});

javascript
$("#openDialog").click(function() {
  openDialog().done(function(value) {
    console.log("用户点击了确定按钮，并输入了值：" + value);
  }).fail(function() {
    console.log("用户点击了取消按钮或关闭了对话框。");
  });
});