sweetAlert - 单击确认按钮时不调用函数

Posted 2023-05-08

【中文标题】sweetAlert - 单击确认按钮时不调用函数

【英文标题】：sweetAlert - not calling function on confirm button click

【发布时间】：2019-07-05 12:54:54

【问题描述】：

我通过关注this 添加了以下警报，但是当我单击取消或确认按钮时没有调用任何函数，我做错了什么吗？我的母版页有指向 css 的链接：<link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet" />

            sweetAlert(
                html: true,
                title: 'Error',
                text: "test",
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Check',            
            ).then((result) => 
                if (result.value) 
                    sweetAlert("Yes", "Blah", "info");
                 else                    
                    sweetAlert("No", "Blah", "info");
                
                );

【问题讨论】：

Sweet alert 也需要包含它的 .js 文件

【参考方案1】：

如果您使用jQuery，请在要调用操作的DOM 元素上附加点击事件，然后触发SweetAlert 弹出窗口。使用SweetAlert 或sweetAlert 实例触发（fire）事件。

以下示例可帮助您开始：

$(function() 
  const events = 
    click: 'click'
  ;
  
  const $button = $('#somethingToDo');
  
  $button.on(events.click, function(event) 
    const config = 
      html: true,
      title: 'Error',
      text: 'test',
      type: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Check',    
    ;
    
    // first variant
    sweetAlert.fire(config).then(callback);
    
    function callback(result) 
      if (result.value) 
        // second variant 
        SweetAlert.fire("Yes", "Blah", "info");
       else 
        // second variant 
        SweetAlert.fire("No", "Blah", "info");
      
    
  );
)

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8.0.6/dist/sweetalert2.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@8.0.6/dist/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="somethingToDo">
  Do something
</button>