甜蜜警報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 

通過在不需要最後});，除非它涉及您還沒有發佈代碼的方式。

祝你好運。