选择在jQuery中动态添加的类

Question

i'm trying to make changes to a div with a class name added with addClass(). but i can't get it work.

the div. clicking this div would remove "one" from the class, and replace it with "two", which i've managed to do.

<div class="product one">
    Click
</div>   

and the jquery. unfortunately, i cant seem to remove "two" and add "three" or apply any changes on jquery to "two".

$('.product').on('click', function() {
    $(this).removeClass('one').addClass('two');
    TweenLite.to(".home_loop", 0.3, {height:110});
});

$('.two').on('click', function() {
    $('this').removeClass('two').addClass('three');
    TweenLite.to(".home_loop", 0.3, {height:0}); 
});

here's a simplified example (with the tweenlite stripped out) used an inspector to see the class changes when i click on the words "Click".

http://jsfiddle.net/do6t4pa5/3/show/

also i tried using .toggle but it will make the link in the div not work.

Answer 1

Try the FIDDLE

Code for reference

$(document).ready(function(){
$('.product').on('click', function() {
    $(this).removeClass('one').addClass('two');
    $('.two').on('click', function() {
    $(this).removeClass('two').addClass('three');
});
});
});

hope it helps

Answer 2

$(document).ready(function(){

}).on('click','.product',function(){
    $(this).removeClass('one').addClass('two');
}).on('click','.two',function(){
    $(this).removeClass('two').addClass('three');
});