如何使用甜蜜警报

Question

这是我的 HTML 代码 我有两个输入按钮，当用户单击任何按钮时，我想显示甜蜜警报

<tr class="examples odd" id="UserId_1" role="row">
   <td class="sorting_1">1</td>
   <td>admin</td><td>Mohammad</td>
   <td>Farzin</td><td class="warning"><input type="button"
   value="Delete" class="sweet-5" id="btn_Delete1"></td>
</tr>
<tr class="examples even" id="UserId_5" role="row">
   <td class="sorting_1">2</td>
   <td>11</td><td>11</td>
   <td>11</td><td class="warning"><input type="button" value="Delete" class="sweet-5"
   id="btn_Delete5"></td>
</tr>   

脚本

$(document).ready(function () {
document.querySelector('td.warning input').onclick = function () {
    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: 'btn-danger',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: false,
        closeOnCancel: false
        },
     function (isConfirm) {
        if (isConfirm) {
            swal("Deleted!", "Your imaginary file has been deleted!", "success");
            } else {
                swal("Cancelled", "Your imaginary file is safe :)", "error");
            }
        });
    };

});

只有第一个输入按钮显示 Sweet Alert，但 当我点击第二个按钮时没有任何反应

Answer 1

您可能使用的是SweetAlert version 2，并且您的代码适用于版本 1。 这应该有效：

swal({
  title: 'Are you sure?',
  text: 'Some text.',
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#DD6B55',
  confirmButtonText: 'Yes!',
  cancelButtonText: 'No.'
}).then(() => {
  if (result.value) {
    // handle Confirm button click
  } else {
    // result.dismiss can be 'cancel', 'overlay', 'esc' or 'timer'
  }
});

<script src="https://unpkg.com/sweetalert2@7.8.2/dist/sweetalert2.all.js"></script>

来源： Migration from Swal1 to Swal2

Answer 2

试试这个

$(document).ready(function () {
  $('body').on('click', 'td.warning input', function () {
    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: 'btn-danger',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: false,
        closeOnCancel: false
      },
      function (isConfirm) {
        if (isConfirm) {
          swal("Deleted!", "Your imaginary file has been deleted!", "success");
        } else {
          swal("Cancelled", "Your imaginary file is safe :)", "error");
        }
      });
  });
});

检查小提琴

http://jsfiddle.net/hoja/5a6x3m36/5/

Answer 3

如果您想在单击任何按钮时发出甜蜜警报，请更改您的代码，如下所示：

$(document).ready(function(){
  $(document).on('click', 'button', function(){
    Swal.fire({     
       type: 'success',
       title: 'Your work has been done',
       showConfirmButton: false,
       timer: 1500
    })
  });
});

Answer 4

有了甜蜜的警报，它更容易，例如我喜欢一个链接，我需要调用 onclick 函数并确保我包含 sweetalser.css 和 sweetalert.min.js 我希望这会起作用给你

<a onclick="sweetAlert('Greetings', 'Hi', 'error');" class="" data-toggle="modal" href='#modale-id'><i class="fa fa-fw fa-plus"></i>Streams</a>

Answer 5

您只选择与'td.warning input' 选择器匹配的第一个元素，这就是为什么第二个元素没有任何反应。

试试querySelectorAll('td.warning input') 方法。 这将返回一个数组，您可以遍历该数组来设置事件监听器。

Answer 6

window.onload=function()

{

  swal({   title: "PopOutTitle",   text: "Your FIRST Name:",   type: "input",   showCancelButton: true, OnConfirm:school();  
         animation: "slide-from-top",     inputPlaceholder: name }, function(inputValue){   if (inputValue === false) return false;
         if (inputValue === "") { swal.showInputError("You need to write something!"); return false } 
           document.getElementById("name").innerHTML=inputValue || "Unknown";

});


 }

函数学校(){

  swal({   title: "PopOutTitle",   text: "Your last Name:",   type: "input",   showCancelButton: true,   
         animation: "slide-from-top",     inputPlaceholder: name }, function(inputValue){   if (inputValue === false) return false;
         if (inputValue === "") { swal.showInputError("You need to write something!"); return false } 
           document.getElementById("name").innerHTML=inputValue || "Unknown";

});**I want to show multiple swal popout so I want to call the school function when Ok Button is clicked. How can I do this?**

Answer 7

<script>
$(document).ready(function(){
  $('.btn-danger').on("click", function(){
swal({
title: "Delete?",
text: "Please ensure and then confirm!",
type: "warning",
showCancelButton: !0,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel!",
reverseButtons: !0
}).then(function (e) {
if (e.value === true) {
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    var id = $('.btn-danger').attr('data-id');
    var cur_row = this;
    $.ajax({
    type: 'POST',
    url: "{{url('/product_delete')}}/" + id,
    data: {_token: CSRF_TOKEN},
    dataType: 'JSON',
    success: function (results) {
    if (results.success === true)
    {
        swal("Done!", results.message, "success");
        setTimeout(function(){
                   location.reload()
                }, 2000);
    } 
    else
    {
        swal("Error!", results.message, "error");
    }
    }
    });
}
    });
  });
});
</script>

/* Add link in head section */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script>