How to use .not() Jquery Selector on triple selector class?

Question

I have an issue with two buttons that share common html classes. Both buttons are part of a tutorial. As the tutorial goes through the steps the Skip button appears first. as the tutorial gets to the last step before moving on to anew tutorial page, the 3rd party JS package dynamically adds another class to the skip button and changes the inner html to Continue. My issue is below

One button is:

<a class="introjs-button introjs-skipbutton" role="button" tabindex="0">Skip</a>

The other button is

<a class="introjs-button introjs-skipbutton introjs-donebutton" role="button" tabindex="0">Continue</a>

These buttons are part of a tutorial guide with certain steps. They are not displayed at the same time. However, clicking the Skip button fires the same action as the Continue button, as displayed in the JS code below. I'd like the action to only Fire when the Skip button is clicked but it keeps firing on both and I cant figure out how to figure it out.

I'd like a certain action to fire but only fire when <a class="introjs-button introjs-skipbutton> is fired and NOT <a class="introjs-button introjs-skipbutton introjs-donebutton> is fired.

$("a.introjs-button.introjs-skipbutton").not(".introjs-donebutton").click(() => {
    console.log('skipbuttontriggered')
    this._app.skipTutorial = true;
})

I've tried various combinations and was hoping to get some insight on using the not() selector for triple stacked html classes.

Answer 1

You don't need to use :not() . You could just check it doesn't have the class.

$("a.introjs-button.introjs-skipbutton").click(() => {
  if ( ! $(this).hasClass('introjs-donebutton') {
    console.log('skipbuttontriggered')
    this._app.skipTutorial = true;
  }
})

The hasClass() documentation can be read here.

Answer 2

If you're adding and removing the introjs-donebutton class dynamically, you can do it with event delegation and a selector with :not() .

$(document).on("click", "a.introjs-button.introjs-skipbutton:not(.introjs-donebutton)", () => {
    console.log('skipbuttontriggered')
    this._app.skipTutorial = true;
})