Question

swal({
    title: "xxx",
    type: "warning",
    showCancelButton: true,
    .....
    },
    function(isConfirm) {
        if (isConfirm) {
            swal("yes, do it!");
        } else {
            swal("cannel!");
        }
    }
);

在我的页面中有一个绑定js函数的按钮，该函数执行此代码。单击按钮时，页面上出现“您确定”确认框。但是当我点击是的时候，下一个sweetalert就会冲洗并立即消失。怎么了？

Answer 1

看起来插件的关闭操作使用计时器进行一些清理，这在300ms后执行，因此新警报也会被清除。

修复它的一个方法是使用像

这样的计时器

＆＃13;

swal({
    title: "xxx",
    type: "warning",
    showCancelButton: true
  },
  function(isConfirm) {
    debugger;
    setTimeout(function() {
      if (isConfirm) {
        swal("yes, do it!");
      } else {
        swal("cannel!");
      }
    }, 400)
  }
);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />

＆＃13;

Answer 2

问题已经解决，请考虑另一种方法。

您还可以将event.preventDefault()用于第二个 sweetalert 。我遇到了同样的情况，除了我只有1个sweetalert要显示。

来自this mozilla page，

Event接口的preventDefault（）方法告诉用户代理如果事件没有得到明确处理，则默认操作不应该像通常那样采取。

单击提交按钮时，它出现在一个实例中，然后我被定向到另一个页面（在action属性中指定）。由于这是默认情况下发生的，因此使用event.preventDefault()使其保持不变。

感谢您分享您的疑问！

Answer 3

将closeonconfirm属性设置为false，即closeOnConfirm: false,

Answer 4

一旦您调用显示甜蜜警报的函数，请确保调用按钮类型应保持为按钮不提交。

<form  method="post">                                 
 <button  type="button" class="btn-wide btn btn-info" onclick="buy_harvest()">Buy</button>
                                            <button  type="submit" class="btn-wide btn-shadow btn btn-success" name="good_condition">Good condition</button>
                                            <button  type="submit" class="btn-wide btn btn-danger" name="inedible">Inedible</button>                                              </form>  

<script>
    function buy_harvest(){
       

    var { value: formValues } = Swal.fire({
        title: 'How mutch want to Buy?',
        showCancelButton: true,
        confirmButtonText: `Buy`,
        html:
          '<div style="float:left;"><input type="text" id="buy_qty" style="width:150px;"><label> Quanity </label></div>' ,
          
        focusConfirm: false,
        preConfirm: () => {
          var buy_qty = document.getElementById("buy_qty").value;
          if(buy_qty!="" || buy_qty!=0){
           
            //call to another function and pass value
            process_buy(buy_qty);
          }       
        }
      })
    }
</script>

Answer 5

只需在 swal 函数前添加 event.preventDefault(); 即可防止其消失。

sweetalert瞬间消失

5 个答案: