bind future coming classes failed in jquery

Question

DEMO

$(function(){
    $('button').click(function(){
       $('p').addClass('red');


    });

    $('body').on('.red','click',function(){
        alert(''); // doesn't work?
    });
});

Why does the red class's click event doesn't fire? I thought by using on() it will catch any future coming classes?

Is it because of closure problem?

Answer 1

You have incorrect syntax for event delegation:

$('body').on('click','.red',function(){
    alert('test'); 
});

Working Demo

Answer 2

USe

 $('body').on('click','.red',function(){
        alert(''); // doesn't work?
    });

You misplaced class name and event..

Fiddle

Answer 3

Syntax error
$('body').on('click','.red',function(){
    alert(''); 
});
--OR--
$(document).on('click', '.red',function(){
    alert(''); 
 });