如何使用jascript在html中添加sweetalert弹出消息

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来检测click事件时，你为什么要使用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

您在代码中使用了已弃用的选项（type，showCancelButton等）。

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

通过jQuery绑定点击事件，并使用then（）方法获取swal。

示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
<li data-information="More information 1">Example product 1</li><li data-information="More information 2">Example product 2</li><li data-information="More information 3">Example product 3</li><li data-information="More information 4">Example product 4</li>
<li data-information="More information 5">Example product 5</li><li data-information="More information 6">Example product 6</li><li data-information="More information 7">Example product 7</li><li data-information="More information 8">Example product 8</li><li data-information="More information 9">Example product 9</li><li data-information="More information 10">Example product 10</li><li data-information="More information 11">Example product 11</li><li data-information="More information 12">Example product 12</li>
</ul>

<div class="popup-holder">
  <div class="product-popup">More information (i = <span>0</span>)</div>
</div>

和javascript：

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

内联示例

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

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";
      }
  });

});

和javascript：

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