如何在 jquery 的 sweetalert 对话框中为 html 按钮添加事件侦听器

Question

我正在使用 SweetAlert 框，我有三个按钮，它们是我使用 html 输入创建的，但我需要三个不同的单击事件侦听器在每次单击按钮时执行不同的操作，但它不起作用。请帮助

$('#btnProcessRequest').click(function (e) {
   e.preventDefault(); // 
   var btn = "button";

   swal({
         title: "HTML <small>Consultation Review</small>!",
         text:  '<button type="' + btn + '" id="btnA" >A</button> ' +
                '<button type="' + btn + '" id="btnB" >B</button> ' +
                '<button type="' + btn + '" id="btnC" >C</button>',
          html: true 

       }, function (idd) {

             $("#btnA").click(function () {
                    alert(this.id);
             });

             $("#btnB").click(function () {
                    alert(this.id);
             });

             $("#btnC").click(function () {
                    alert(this.id);
             });
      });
 });

Answer 1

Buttons are created on run-time hence you will need event delegation

注意：如果您以这种方式附加事件，则每次调用 sweet alert 时都会附加事件。然后绑定出来swal初始化。

试试这个：

$("#btnProcessRequest").click(function(e) {
  e.preventDefault();
  var btn = "button";
  swal({
    title: "HTML <small>Consultation Review</small>!",
    text: '<button type="' + btn + '" id="btnA" >A</button> ' +
      '<button type="' + btn + '" id="btnB" >B</button> ' +
      '<button type="' + btn + '" id="btnC" >C</button>',
    html: true,
    showConfirmButton: false
  });
});
$(document).on('click', "#btnA", function() {
  alert(this.id);
});

$(document).on('click', "#btnB", function() {
  alert(this.id);
});

$(document).on('click', "#btnC", function() {
  alert(this.id);
});

<script src="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.js"></script>
<link href="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="btnProcessRequest">
  Show Sweet Alert
</button>

如何在 jquery 的 sweetalert 对话框中为 html 按钮添加事件侦听器

How to add event listener for html buttons in sweetalert dialog box in jquery

html

javascript

jquery

sweetalert