javascript - Defining a class's .click - Before element has the class -

i have following code:

$('.fam.page_edit').click(function(event){     event.preventdefault();     $(this).removeclass('page_edit').addclass("accept");     $(this).parent().parent().removeclass("ikkeskrevet").addclass("kaldt"); });  $('.fam.accept').click(function(event){     event.preventdefault();     $(this).removeclass('accept').addclass("add");     alert("debug 1.");     $(this).parent().parent().removeclass("kaldt").addclass("skrevet");  }); 

the first part works fine.
classes change, , see no problem there. although. when i'm trying click it, second time. after class changes.
no reaction. "debug 1" doesn't pop up, no console errors in firebug. nothing.

as adding class dynamically, event should delegated, otherwise there no element .fam.accept classnames on page load, jquery can't find/select element.

$(document).on('click', '.fam.accept', function(event){    // ... }); 

note events bound elements not class names, first click handler executed when remove page_edit classname. if change classnames, can use .toggleclass() method instead.

$('.fam.page_edit').click(function(event){     event.preventdefault();     $(this).toggleclass('page_edit accept');     // ... });