Question

I’m using addClass() to add .expanded to an element on click. I then don’t want another block of code to match that element anymore. I’m using a combination of .not() and .on() to try and get jQuery to notice the newly added class, but not having much luck – the handler I’ve written goes something like this:

    $(".person").not("expanded").on({
            mouseleave:...
    });

Though obviously my .on() syntax isn’t correct above, how can I utilise .not() with newly added classnames?

Answer 1

If you want live event, you can try something like this:

$(document).on('mouseleave','.person:not(.expanded)',function(){
  ...
})

The selector '.person:not(.expanded)' will be used to filter the event.

If you used $('.person:not(.expanded)').on('mouseleave',function() { ...}, it will attached the event handler only to the selected elements at this moment. If you changed expanded class of an element, it will not be updated.

Better than document you should attach the delegate to the container of your person elements (for performance reason). See on documentation.