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>

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

1 个答案: