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.

You can only click on one button at a time. What do you mean by this? — Barmar, Apr 25 '19 at 21:20
Apologies for not being clear. These buttons are dynamically added to a tooltip depending on a certain step of a tutorial guide process. So as the user goes through the steps, if the step isnt the last one on the current page, itll display skip. if the step is the last one on teh current page, itll say continue. — tyjoo, Apr 25 '19 at 21:30
If the buttons are being added dynamically, you should be using event delegation. See https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Apr 25 '19 at 21:38
Heres an issue. I've tried event delegation and that didnt fix the issue. I tried adding an id to the introjs-button introjs-skipbutton class but the 3rd party javascript package dynamically adds the introjs-donebutton class to the link and it retains the id i placed there. — tyjoo, Apr 25 '19 at 22:24
I've seen many questions posted from people who misunderstood how to do event delegation properly. Post your code that tries to do it. — Barmar, Apr 25 '19 at 23:47

score 0 · Answer 1 · answered Apr 25 '19 at 21:20

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.

score -1 · Answer 2 · answered Apr 25 '19 at 21:23

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;
})

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

2 Answers2