Search code examples
jquerycssclickaddclasstoggleclass

addClass to a div and then apply on click to that new class, Jquery

Fiddle: http://jsfiddle.net/8TxmK/

I have two divs, one which has class="bb" and another with no classes. In my jquery, I apply the following functions:

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

    $(this).addClass('bb');

}));

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

    alert('bb class clicked')

}));

So I want to addClass 'bb' to the second div when clicked. This works fine. However, the second part 'bb' on click doesn't work for the div which 'bb' class wasn't loaded from the beginning.

Is there any workaround for this?

I have tried this: http://jsfiddle.net/M8Ja4/ But the function repeats itself once more each time.

Solution

  • Yes.. delegate. Replace body with the closest parent that exists when the dom is loaded

    $('body').on('click','.bb',function(){

});