Fatal编程技术网
  • button/
  • Button SweetAlert2-将另一个事件绑定到取消按钮？

Button SweetAlert2-将另一个事件绑定到取消按钮？

button

Button SweetAlert2-将另一个事件绑定到取消按钮？,button,sweetalert,sweetalert2,Button,Sweetalert,Sweetalert2,我正在使用最新版本的很棒的jquery插件 我有一个带有两个按钮的简单的SweetAlert。一个按钮是确认按钮，另一个是取消按钮。我正在使用html选项向警报添加文本输入。当用户按下确认按钮时，将执行AJAX调用并关闭警报 现在我想使用cancel按钮来执行其他一些代码，而不是关闭警报的默认操作。（用户可以使用ShowClose按钮关闭警报：true） 简而言之：如何删除结束处理程序并将自己的自定义处理程序添加到swal的cancel按钮 您可以创建一个自定义html文件，其中有一个cance

我正在使用最新版本的很棒的jquery插件

我有一个带有两个按钮的简单的SweetAlert。一个按钮是确认按钮，另一个是取消按钮。我正在使用html选项向警报添加文本输入。当用户按下确认按钮时，将执行AJAX调用并关闭警报

现在我想使用cancel按钮来执行其他一些代码，而不是关闭警报的默认操作。（用户可以使用ShowClose按钮关闭警报：true）

简而言之：如何删除结束处理程序并将自己的自定义处理程序添加到swal的cancel按钮

  • 您可以创建一个自定义html文件，其中有一个cancel按钮，它将触发您自己的cancel处理程序
    • 比如说

    <html> <!--custom.html-->      
  <button id="confirmBtn">confirm<button>
  <button id="cancelBtn">cancel<button>
<html>

$.get("custom.html", function (data) {
        swal({
            html: data,
            showCloseButton: false,
            showCancelButton: false,
            showConfirmButton: false
        });
        $("#cancelBtn").click(function () {
            //handle your cancel button being clicked
            $.when($.ajax({....})).then(function() {
                 // when all AJAX requests are complete
             });
        });
        $("#confirmBtn").click(function () {
            //handle your confirm button being clicked
        });
    });
    全部

    swal({
   title: 'Swal Title',
   text: 'Your swal text',
   type: 'warning',
   showCancelButton: true,
   cancelButtonText: 'cancel'
}).then(function(){
   //Confirmed
}, function(dismiss){
   if(dismiss == 'cancel'){
      //swal({..}); //un-comment this line to add another sweet alert popup on cancel
   }
});
    只需添加自定义函数即可捕获拒绝，例如：

    swal({
   title: 'Some title',
   text: 'some text for the popup',
   type: 'warning',
   showCancelButton: true,
   cancelButtonText: 'Some text for cancel button'
}).then(function(){
   // function when confirm button clicked
}, function(dismiss){
   if(dismiss == 'cancel'){
       // function when cancel button is clicked
   }
});
    您甚至可以添加更多函数来捕获另一个解雇事件，只需阅读有关解雇事件的更多信息。

    只需对@Raditya Adi Baskara answer进行一点自定义

    swal({
        title: "$titleWarnignBox",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#36c6d3',
        cancelButtonColor: '#d33',
        confirmButtonText: '$confrimBtn',
        cancelButtonText: '$cancelBtn'
    }).then(function(result){
        if(result.value){
            console.log('good');
        }else if(result.dismiss == 'cancel'){
           console.log('cancel');
        }

    });
    在sweetalert 2中

    在第二节

    Swal.fire({ title: 'Title here', showCloseButton: false, showCancelButton: true, showConfirmButton: false, focusConfirm: false, allowOutsideClick: false, allowEscapeKey: false, cancelButtonText: 'Cancel Payment' }).then(function(res) { if (res.isDismissed) { alert('Cancel button clicked'); } }); 喷火({ 标题：'此处标题'， showCloseButton:false， showCancelButton:true， showconfixton:false， focusConfirm:false， allowOutsideClick:false， allowEscapeKey:false， cancelButtonText:“取消付款” }).然后（功能（res）{ 如果（关于ISDISSED的决议）{ 警报（“单击取消按钮”）； } });
    在
    sweetalert2
    中，如果要在单击取消按钮时阻止关闭，可以将自己的自定义按钮添加为html:（）

    var onBtnClicked=（btnId）=>{
//Swal.close（）；
警报（“您选择：“+btnId”）；
};
喷火({
标题：“你想做什么？”，
图标：“警告”，
showconfixton:false，
showCloseButton：正确，
html:`
选择一个动作
    
回复
删除
`
});
    我的意思并非如此，因为这将关闭警报。我需要在不关闭警报的情况下处理取消事件。这可能吗？ 
                swal.fire({
                title: "Notice",
                text: "Are you sure ?",
                showCancelButton: true,
                type: 'error',
                cancelButtonColor: '#d33',
            })
                .then((res) => {
                    if(res.value){
                        console.log('confirmed');
                    }else if(res.dismiss == 'cancel'){
                        console.log('cancel');
                    }
                    else if(res.dismiss == 'esc'){
                        console.log('cancle-esc**strong text**');
                    }
                });
    Swal.fire({ title: 'Title here', showCloseButton: false, showCancelButton: true, showConfirmButton: false, focusConfirm: false, allowOutsideClick: false, allowEscapeKey: false, cancelButtonText: 'Cancel Payment' }).then(function(res) { if (res.isDismissed) { alert('Cancel button clicked'); } }); 
    var onBtnClicked = (btnId) => {
  // Swal.close();
  alert("you choosed: " + btnId);
};
Swal.fire({
  title: "What you want to do?",
  icon: "warning",
  showConfirmButton: false,
  showCloseButton: true,
  html: `
     <p>select an action</p>
    <div>
      <button class="btn btn-primary" onclick="onBtnClicked('reply')">Reply</button>
      <button class="btn btn-danger" onclick="onBtnClicked('delete')">Delete</button>
    </div>`
});