Question

If I click the numbers div, I should get an alert. If I click the clicker, a class of less is added to the numbers div, and any click after that on the numbers div should NOT show the alert, since it now has the class of less. Instead, I still get the alert, as if the less class is not there. What am I doing wrong?

<div id="clicker">Clicker</div>
<div class="numbers">123456789</div>

$('.numbers').not('.less').on('click',function(){
    alert('should not alert if has class less after clicker');
});

$('#clicker').on('click',function(){
    $('.numbers').addClass('less');
});

Here is a fiddle

Thanks for the help fellas, I ended up with this:

$('body').on('click', '.numbers:not(".less")', function(){
   alert('should not alert if has class less after clicker');
});

Answer 1

Try Delegating the event

$('body').on('click','.numbers' ,function(e){
    if( $(e.target).hasClass('less'){
       // Do nothing
    }
    else{
       alert('should not alert if has class less after clicker');
    }
});

Check Fiddle

The event is added to the element not to the class, So when you add a condition to not fire the event based on a class condition , it won’t work ..

You need to delegate the event for such cases.