甜蜜警报2 - 有多个按钮打开不同的警报

Question

我有一个甜蜜的警报，有多个按钮。当用户点击一个按钮时，应该打开一个不同的警报。我能够得到1个按钮来工作，但就是这样。 Sweet Alert 2有可能吗？

代码：

$("#swa").on("click", function(e) { 
     swal({ 
      title: '<u><b>Test 1</b></u><p>&nbsp;</p>', 
      html: 
      '<button id="panel2">Panel 2</button>'+ 
      '<p>&nbsp;</p>'+ 
      '<button id="panel3">Panel 3</button>', 
      showCloseButton: true, 
      showCancelButton: true, 
      cancelButtonText: 'Go Back', 
      width: '75%' 
     }) 


$("#panel2").on("click", function(e) { 
     swal({ 
      title: '<u><b>Test 2</b></u><p>&nbsp;</p>', 
      html: 
      'Test 2', 
      showCloseButton: true, 
      showCancelButton: true, 
      cancelButtonText: 'Go Back', 
      width: '75%' 
     }) 

$("#panel3").on("click", function(e) { 
     swal({ 
      title: '<u><b>Test 3</b></u><p>&nbsp;</p>', 
      html: 
      'Test 3', 
      showCloseButton: true, 
      showCancelButton: true, 
      cancelButtonText: 'Go Back', 
      width: '75%' 
     }) 
}); 
}); 
}); 

JS Fiddle

Answer 1

正在发生的事情是，你有你的甜蜜是Panel2里面戒备您甜·Panel3中的警报。要解决这个问题，只需移动你的javaScript即可;

$("#panel2").on("click", function(e) { 
     swal({ 
      title: '<u><b>Test 2</b></u><p>&nbsp;</p>', 
      html: 
      'Test 2', 
      showCloseButton: true, 
      showCancelButton: true, 
      cancelButtonText: 'Go Back', 
      width: '75%' 
     }) 
    });// <--moved this here 

$("#panel3").on("click", function(e) { 
     swal({ 
      title: '<u><b>Test 3</b></u><p>&nbsp;</p>', 
      html: 
      'Test 3', 
      showCloseButton: true, 
      showCancelButton: true, 
      cancelButtonText: 'Go Back', 
      width: '75%' 
     }) 
}); 
//<--from here 
});// I don't think this line is needed 

通过在不需要最后});，除非它涉及您还没有发布代码的方式。

祝你好运。