Question

我有一个用jQuery UI建立的确认对话框我尝试在用户反应后采取适当的措施（yes或no）：

$("button").click(function() {
  if (showDialog('Do you want to continue?')) {
    console.log("yes");
  } else {
    console.log("no");
  }
});

function showDialog(message) {
  var dfd = new $.Deferred();
  $("#dialog").dialog({
    modal: true,
    buttons: {
      "Yes": function() {
        dfd.resolve();
        $(this).dialog("close");
      },
      "No": function() {
        $(this).dialog("close");
      }
    }
  });
  $("#dialog").html(message);
}

就我而言，我总是得到no。

此外，即使在单击按钮之前，也会显示no。所以我假设，这是异步的。有没有办法防止这种情况发生？

Here is a fiddle

Answer 1

你在推迟的正确道路上，但你实际上并没有听取它来解决或拒绝：

      $("button").click(function() {
            showDialog('Do you want to continue?').then(function() {
                console.log("yes");
            }, function() {
                console.log("no");
            })
        });

        function showDialog(message) {
            var dfd = new $.Deferred();
            $("#dialog").dialog({
                modal: true,
                buttons: {
                    "Yes": function() {
                        dfd.resolve();
                        $(this).dialog("close");
                    },
                    "No": function() {
                        dfd.reject();
                        $(this).dialog("close");
                    }
                }
            });
            $("#dialog").html(message);
            return dfd;
        }

这是您的小提琴更新后工作https://jsfiddle.net/v86bc028/1/

编辑 - 显示用于两个按钮的分辨率的第二小提琴 https://jsfiddle.net/35edpgxp/1/

Answer 2

您无需使用$.Deferred。此外，当用户按“是”或“否”按钮时发生的逻辑应该位于“按钮”配置选项中提供的功能中。像这样：

$("button").click(function() {
  showDialog('Do you want to continue?');
});

function showDialog(message) {
  $("#dialog").dialog({
    modal: true,
    buttons: {
      "Yes": function() {
      	console.log('yes');
        $(this).dialog("close");
      },
      "No": function() {
        console.log('no');
        $(this).dialog("close");
      }
    }
  });
  $("#dialog").html(message);
}

单击确认对话框后执行适当的操作

2 个答案: