not selector, on() click event

Question

I am having some problems in executing the following code:

    var i = 1;  
$(\'.hello:not(.selected)\').on(\'click\',function(){
    $(this).addClass(\'selected         


        

Answer 1

The problem is the event handler doesn't get removed just because you change the class. You are attaching the events to the elements, and they stay there forever.

To get around this, you could just test for the "selected" class on each event handle:

$('.hello:not(.selected)').on('click',function(){
    if ($(this).hasClass('selected')) {
        $(this).addClass('selected');
        $(this).css({opacity : 0.5});       
        console.log(i++);
    }
});

But for efficiency and simpler code, you should probably delegate this:

$('body').on('click', '.hello:not(.selected)', function() {
    var $self = $(this);
    $self.addClass('selected');
    $self.css({opacity : 0.5});       
    console.log(i++);
});

I used "body" as the element to attach this delegation, but you should probably use something lower in the tree, like a parent or grandparent of the ".hello" elements. This only attaches one event handler, and relies on bubbling to test the selected state of each element as they change in real time.

Also note that I cached var $self = $(this); that was also for efficiency, so you don't end up jQuery-extending the element more than you need to.