Javascript not() in onclick event

Question

I have a click function in my card game that I would like to include not() in to exclude certain classes but I can't seem to get it to work.

Basically, I would like to make it so that as long as the class does not equal "match" or "open", to proceed with the click event. If they match then do not run the function.

Here is snippet of the updated basic code I am working with now:

function addCardListener() {
     $( '.card:not(.match, .open, .show)').on('click', function(){
          alert("TEST");
          $(this).addClass('open show');
     });
}

I tried replacing:

$('.card').on('click', function() {

with:

$( '.card:not(".match, .open")').bind('click', function(){

but it doesn't work. I can proceed with clicking anything in my deck whether or not those classes are defined on the card. What am I doing wrong? Thanks in advance for any help!

Update: I stripped out all my code and still can't get it to work. Not sure if you will see this update but my board creation is done like this:

function createBoard() {
     shuffle(symbols);
     match = 0;
     moves = 0;
          for (var i = 0; i < symbols.length; i++) {
               deck.append($('<li class="card"><i class="fa fa-' + 
               symbols[i] + '"></i></li>'));
    }
    addCardListener();
};

The click function goes off whether or not the card's class has open match or show on it. I guess I"m confused, I thought with not() the function would not run if the card had those classes. I updated the stripped down version of the function above. Any advice would be greatly appreciated!

no console errors, it just acts as if the not method doesn't exist. I can click the cards which I was hoping not() would stop the function from running. I updated my code above to a stripped down version. Any advice? Thanks so much — Beej, Oct 07 '17 at 23:15

score 2 · Answer 1 · edited Oct 06 '17 at 21:39

2

Try this - delegate if the cards are inserted dynamically:

$('body').on('click', '.card:not(.match,.open)', function(e) {
    console.log(e);
});

Change 'body' to a closer container if possible to speed up the delegation

edited Oct 06 '17 at 21:39

mplungjan

169,008
28
173
236

answered Oct 06 '17 at 21:34

refeniz

525
1
5
14

1

thanks so much for sharing, I tried yours instead and I can't click any of the cards. I think I must have a deeper problem going on. If I use $('.card').not('.match').on('click', function () { }); I can click the cards but it ignores my not. I have checked and my classes are correct too. I'll keep investigating, thanks again for your time. – Beej Oct 07 '17 at 00:10
I just happened to notice your update - Are you adding `.match` or `.open` classes to your cards dynamically? – refeniz Oct 10 '17 at 22:52
I figured out what I was doing wrong! I didn't know once you attach an event listener it stays that way, which caused my confusion. I thought it was a one-off event so to speak. So I changed to checking it with the hasClass() method which worked perfect! Thanks again for your time! – Beej Oct 12 '17 at 21:35

Javascript not() in onclick event

1 Answers1