jQuery dynamically added class does not fire

Question

<a href="#" class='gbutton yen_form' rel="overlay-box1">Next</a>

$('yen_form').click(function(){
  //some validations done here
  $(this).addClass('overlay');
});

$('overlay').click(function(){
  //overlay appears
})

First function fires correctly but the second 'overlay' class function does not fired at all. If I added overlay to the anchor it works properly. why???

Can any one solve this or I am doing anything wrong??

Answer 1

Use the live method $(".overlay").live("click", function() { });

NB After adding the class to the anchor, live event will fire immediately. Can't you just show the overlay rather than adding a class? Use the code below

$('.yen_form').click(function(){
  //some validations done here
  $(this).addClass('overlay');
});

$('.overlay').live("click", function(){
  //overlay appears
});

Answer 2

Thanks Albert, I did this and got the solution.