CODEWITHSUNDEEP
jquery
marksy
marksy

Reputation: 64

jquery on 'click' not working on generated class

I'm trying to add a class of 'this' when you click on an li, and when you click on a class with '.this' it doesnt work.

Even when i use the .on method it doesnt work. What am i missing? this is driving me crazy.

var thisLi = $('ul li');

$('li').on('click', function() {
    $(thisLi).removeClass('that');
    $(thisLi).removeClass('this');
    $(this).addClass('this');
});


$('li.this').on("click", "li.this", function() {
    $(this).addClass('that');
 });

http://jsfiddle.net/zfda8145/2/

Upvotes: 0

Views: 85

Answers (6)

Xavier Doustaly
Xavier Doustaly

Reputation: 83

You could do that kind of thing :

var thisLi = $('ul li');

$('li').on('click', function() {
    if(this.className!=='this'){
    $(thisLi).removeClass('that');
    $(thisLi).removeClass('this');
    $(this).addClass('this');
    }else{
       $(this).addClass('that');
    }
});

Upvotes: 0

StephenCollins
StephenCollins

Reputation: 805

I think the problem is that when you click on this.li, it triggers both functions, first removing the class, and then not executing because the class is gone.

I rewrote it as one function that does class checking instead of separate functions. I don't really like this, but if you are stuck it will get you going.

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

    if ($(this).hasClass('that')) {
        $(this).removeClass('that');        
    } else if ($(this).hasClass('this')) {
        $(this).addClass('that');
        $(this).removeClass('this');
    } else {
        $(this).addClass('this');
    }

});

And here is a working fiddle - http://jsfiddle.net/zfda8145/24/

Upvotes: 0

renakre
renakre

Reputation: 8291

The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements)

(https://api.jquery.com/on/)

It works when you change this

$('li.this').on("click", "li.this", function()

to this:

$(document).on("click", "li.this", function()

In this logic, you actually determine the scope where click event can take place. If you use $('li.this').on(), this considers click events for only descendants of li.this but no descendants exists for li.this.

Upvotes: 0

Brijesh Bhatt
Brijesh Bhatt

Reputation: 3830

Try this: 

    var thisLi = $('ul');

    $('li').on('click', function() {
        $(thisLi).removeClass('that');
        $(thisLi).removeClass('this');
        $(this).addClass('this');
    });


    $(thisLi).on("click","li.this", function() {
        $(this).addClass('that');
     });

Working DEMO

Upvotes: 0

Beri
Beri

Reputation: 11620

This snipplet should do the trick. First you need to grab the ul element - to avoid searching shole DOM for ul. Secondly you apply click event on it's elements:)

    var thisLi = $('ul li');
    var list = $('ul');
    list.on('click','li', function() {
        $(thisLi).removeClass('that');
        $(thisLi).removeClass('this');
        $(this).addClass('this');
    });


    list.on('click','li.this', function() {
        $(this).addClass('that');
     });

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

Use event delegation for that. Because normal event binding will not bind the event to the future elements. For that, you need to bind the events to a particular parent. Here I am using document

$(document).on("click", "li.this", function() {
    $(this).addClass('that');
 });

Upvotes: 1

Related Questions