如何在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

按钮是在运行时创建的,因此您将需要 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>