Question

Im having problems with jQuery click event on a button inside a colorbox popup.

The button is the following:

<div id="popup">
    <button class="close_bu">Close</button>
</div>

Which by default have the following event attached:

jQuery('.close_bu').bind('click',function(){        
            jQuery.colorbox.close();
});

When i fire another event i want to change the default behavior so i do the following:

jQuery('#anotherpopup').on('click','.deleteplan_button',function(){

            jQuery('#popup .close_bu').addClass('returnBack');
            jQuery('#popup .returnBack').removeClass('close_bu');

            jQuery.colorbox({inline:true , href:"#popup", opacity: 0.6, width: "600px"});
return false;
         })

An i have added :

jQuery('#popup').on('click','.returnBack',function(){
                e.preventDefault();
                //Do something
})

But the new event attached to .returnBack is not working and when i click the button is firing the close event , it doesnt matter that the button dont have the .close_bu class anymore, it keep firing that event.

Im a bit confused :S

Answer 1

In your code there is no element with the id popup. So jQuery('#popup') will do nothing (or you haven’t shown us vital parts of the code).

Update:

you will need to use .unbind() instead of removing the class

$('#popup .close_bu').unbind('click');

by '#popup .close_bu' you just select the element you want to wire up with the event, or in this case unwire from the event. The jQuery css selector just looks like css. The connection between the event and the handler doe not use css.
The whole trick of adding and removing classes is to trigger different css styles, it will only alter the appearance of an elment, but it won’t change events.