JSFiddle - React, Tailwind, and code Playground

Change class name on click in jQuery

by leonsaysHi

HTML

<button id="sendPayment">Pay</button>
   - 
  <button id="initPaymentHandler">Add new listener (Calls <code>addPaymentHandler()</code>)</button>
   - 
  <button id="paytwice">Trigger 2 mouseup events on "Pay" button</button>
  <hr />
  <div id="log"></div>

JavaScript

const 
	outputLog = (s) => { // debug: output log
  	$('<pre />').text(s).appendTo('#log')
  },
	processPayment = () => {
  	outputLog(new Date()) // debug
  	// do process payment ...
    // ...
  },
	addPaymentHandler = () => {
  	const 
    	$paymentbutton = $('#sendPayment'),
    	eventName = 'mouseup',
    	events = $._data($paymentbutton[0], 'events') //get #sendPayment button's event listeners
    if (events && events[eventName]) { // if there is already a listener on the #sendPayment button    	
    	outputLog('!! Payment button\'s listener already exist') // debug
    }
    else { // else add listener on the #sendPayment button    	
    	outputLog('Set payment button\'s listener...') // debug
      $paymentbutton.on(eventName + '.addpayment', (e) => {
        // remove listener
        $paymentbutton.off(eventName + '.addpayment');
      	// call process payment method
        processPayment();
      });
    }
  }
// Init payment button on load:
outputLog('On page load:') // debug
addPaymentHandler();

// Testing:
// "Call addPaymentHandler()" button:
$('#initPaymentHandler').click( () =>{ addPaymentHandler() })
// "Trigger 2 mouseup events" button:
$('#paytwice').click(() =>{
  $("#sendPayment").trigger('mouseup')
  $("#sendPayment").trigger('mouseup')
})