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');
});
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');
});
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');
});
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');
});
The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements)
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.
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/
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');
}
});
