jquery - Alertify 在确认之前执行？

Question

我决定使用 Alertify 来修改和设计我的代码。我的旧代码:

<script type="text/javascript">
$('.ask').click(function(){
    var answer = confirm('<?php echo $this->translate('Delete route?'); ?>');   
    return answer;
});

当我按“确定”时，PHP 脚本将运行并删除该记录。 JavaScript 返回 true 或 false。

我在使用 Alertify 时遇到的问题是，我什至无法按“确定”或“取消”，我的 php 脚本在此之前运行。这是代码:

$(".ask").click(function(event){
alertify.confirm("Are you sure you want to commit your reservation?", function (e) {
    if (e) {
        return true; 
    } else {
        return false;
    }
});

});

我看到一些人有类似的问题，我发现我需要使用阻止默认值(这是有道理的)代码:

$(".ask").click(function(event){
event.preventDefault(); // cancel submit
alertify.confirm("Are you sure you want to commit your reservation?", function (e) {
    if (e) {
        return true; // submit form skipping jQuery bound handler
    } else {

    }
});

});

在这种情况下，在我按确定/取消之前，php 脚本不会运行，但当我按其中一个按钮时，它也不会运行。什么都没发生。有什么帮助吗？

Answer 1

您遇到了 JavaScript 的异步特性。在原始代码中，当confirm对话框打开时，所有JavaScript的执行都会暂停，因此您可以直接使用它的返回值。但是，当您使用alertify.confirm时，它不会暂停脚本的执行，因此单击处理程序会立即返回，并且它周围的任何代码也将运行 - 即调用您的php脚本的代码。当您尝试从 alertify.confirm 回调函数内部 return true; 时，您将从该内部函数返回到 alertify 代码，没有从外部点击处理函数返回。

您需要做的是开始使用可用的回调方法，而不是反对它 - 我建议按如下方式重组您的代码。确认 .ask 是 a 标记后，以下内容应该有效:

$(".ask").click(function(event){
  var loc = $(this).attr('href');
  alertify.confirm("Are you sure you want to commit your reservation?", function (e) {
    if (e) {
        document.location.href = loc;
    }
  });
  //prevent link from being followed immediately on click
  return false;
});