javascript - Custom swal button not firing their specific function - Stack Overflow

admin2025-04-26 1

I am using vue-swal to display a dialog to the user. I have modified the usual swal in able to meet my desired functions and flow. While modifying, I have encountered error. I have 3 buttons in my swal and each button has specific functionality that need to be fired once a button was clicked. However, when I click the button, the handler function is not executed. I've tried to put a value on each button and used this as a variable to my condition. What did I miss?

Here is swal.

And my code

swal({
    title: `Checkpoint!`,
    html: `Some Text here.
           <br> <br> <b>
          Some text here?
               </b>
           <br> <br> <br> 
          <button type="button" value="a" class="btn swl-cstm-btn-yes-sbmt-rqst">Yes, Submit Request</button> 
          <button type="button" value="b" class="btn swl-cstm-btn-no-jst-prceed">No, Just proceed</button> 
          <button type="button" value="c" class="btn swl-cstm-btn-cancel" >Cancel</button>`,
   showCancelButton: false,
   showConfirmButton: false,
   }).then((result) => {
       if(result.value === 'a')
       { console.log('Yes, Submit Request was Clicked!') }
       else if(resule.value === 'b')
       { console.log('No, Just proceed was Clicked!') }
       else
       { console.log('Cancel was Clicked!') }
   })

Here is swal.

And my code

swal({
    title: `Checkpoint!`,
    html: `Some Text here.
           <br> <br> <b>
          Some text here?
               </b>
           <br> <br> <br> 
          <button type="button" value="a" class="btn swl-cstm-btn-yes-sbmt-rqst">Yes, Submit Request</button> 
          <button type="button" value="b" class="btn swl-cstm-btn-no-jst-prceed">No, Just proceed</button> 
          <button type="button" value="c" class="btn swl-cstm-btn-cancel" >Cancel</button>`,
   showCancelButton: false,
   showConfirmButton: false,
   }).then((result) => {
       if(result.value === 'a')
       { console.log('Yes, Submit Request was Clicked!') }
       else if(resule.value === 'b')
       { console.log('No, Just proceed was Clicked!') }
       else
       { console.log('Cancel was Clicked!') }
   })

Share Improve this question edited Feb 14, 2019 at 7:43 Sumurai8 20.8k11 gold badges69 silver badges102 bronze badges asked Feb 14, 2019 at 7:37 MONSTEEEER 5807 silver badges23 bronze badges

I would suggest using the Vue-ported version of this library though. – Yom T. Commented Feb 14, 2019 at 7:50
@jom vue-ported version is also the same in the swal version. – MONSTEEEER Commented Feb 14, 2019 at 7:57
Have a look at this demo for dynamically generated buttons sweetalert2.github.io#timer-functions. Basically, your buttons do not have those click handlers registered, unless you are initializing them with the buttons option. – Yom T. Commented Feb 14, 2019 at 8:01
Have seen that but the demo is using jquery. Im using vue.js @jom – MONSTEEEER Commented Feb 14, 2019 at 8:04
1 You could use document.querySelector('.swl-cstm-btn-yes-sbmt-rqst') for that matter. Is the html content loaded from server though? Otherwise, why not use the standard buttons option? – Yom T. Commented Feb 14, 2019 at 8:05

| Show 1 more ment

1 Answer 1

Sorted by: Reset to default 4

Got an Idea to @jom

And now its working. Here what I used also from the documentation of Swal

Swal Multiple Button

Here is now my code.

swal({
title: `Checkpoint!`,
html: `Some Text here.
       <br> <br> <b>
      Some text here?
           </b>
       <br> <br> <br> 
      <button type="button" class="btn btn-yes swl-cstm-btn-yes-sbmt-rqst">Yes, Submit Request</button> 
      <button type="button" class="btn btn-no swl-cstm-btn-no-jst-prceed">No, Just proceed</button> 
      <button type="button" class="btn btn-cancel swl-cstm-btn-cancel" >Cancel</button>`,
showCancelButton: false,
showConfirmButton: false,
onBeforeOpen: () => {
     const yes = document.querySelector('.btn-yes')
     const no = document.querySelector('.btn-no')
     const cancel = document.querySelector('.btn-cancel')

     yes.addEventListener('click', () => {
         console.log('Yes was Cliked.')
     })

     no.addEventListener('click', () => {
         console.log('no was Cliked.')
     })

     cancel.addEventListener('click', () => {
         console.log('cancel was Cliked.')
     })
}
})

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745601417a309328.html

javascriptCustom swal button not firing their specific functionStack Overflow

最新回复(0)