如何使用 javascript 在 html 中添加甜蜜的警报弹出消息

Question

我正在尝试在单击编辑按钮时设置 sweetalert 弹出消息。

这里是示例代码：

<td><a href="/control/edituser/{{Values.id}}" onclick='a' class="btn btn-info">Edit</a></td>

脚本：

<script>
$('a').click(function(e){
e.preventDefault();
var link = $(this).attr('href');

swal({
    title: "Are you sure?",
    text: "By clicking 'OK' you will be redirected to the link.",
    type: "warning",
    showCancelButton: true
},
function(){
    window.location.href = link;
});
});
</script>

Answer 1

关于您的代码伙伴有一些问题。首先，当您没有定义函数而是依靠 jQuery 来检测点击事件时，为什么要使用 onclick='a'？使用 jQuery 或使用 onClick 触发函数调用。

第二件事是您需要检查确认以触发您想要的操作。

<td><a href="/control/edituser/{{Values.id}}" class="btn btn-info">Edit</a></td>

<script>
  $('a').click(function(e) {
    e.preventDefault();
    var link = $(this).attr('href');

    swal({
        title: 'Are you sure?',
        text: "By clicking 'OK' you will be redirected to the link.",
        type: 'warning',
        showCancelButton: true
      },function(isConfirm){
        if (isConfirm){
          window.location.href = link;
        } else {
          // Handle rejection
        }
      });
    });
  </script>

进一步阅读：

How to use confirm using sweet alert?

Using an HTML button to call a JavaScript function

Answer 2

您在代码中使用了不推荐使用的选项（类型、showCancelButton 等）。

如果你只有一个，我建议你为编辑按钮/id 上课。

通过 jQuery 在其上绑定点击事件并使用 then() 方法进行 swal。

示例：

<a href="/" class="editButton">edit</a>

还有 javascript：

var $editButton = $('.editButton');

$editButton.on('click', function(e) {

  e.preventDefault();

  swal({
      title: 'Are you sure?',
      text: 'By clicking \'OK\' you will be redirected to the link.',
      icon: 'warning',
      buttons: {
          cancel: true,
          confirm: true
      }
  }).then(function(value) {
      if (value) {
          //  Either true or null
          window.location.href = "https://www.stackoverflow.com";
      }
  });

});

内联示例

如果您想内联，则将 onclick 属性添加到您的元素并通过它发送 url：

<a href="/" class="editButton" onclick="foo(event, 'https://www.stackoverflow.com');">edit</a>

还有 javascript：

function foo(event, url) {

    event = event || window.event;
    event.preventDefault();

    swal({
        title: 'Are you sure?',
        text: 'By clicking \'OK\' you will be redirected to the link.',
        icon: 'warning',
        buttons: {
            cancel: true,
            confirm: true
        }
    }).then(function(value) {
        if (value) {
            //  Either true or null
            window.location.href = url;
        }
    });
}