You need to use event delegation.
$(document).on('click', '.button-open', function () {
$(this).removeClass('button-open').addClass('button-close');
});
$(document).on('click', '.button-close', function () {
$(this).removeClass('button-close').addClass('button-open');
});
Demo: Fiddle
But it can be simplified as
$(document).on('click', '.button-open, .button-close', function () {
$(this).toggleClass('button-open button-close');
});
Demo: Fiddle
When you use a normal selector to register an event handler those event handlers are added to the target element, so any changes made to the element attributes after the event registration will not affect the already registered handlers. When using event delegation the selectors are evaluated dynamically.