Colorbox close, reopen and keep events

Question

I have a small functionality, which opens in a colorbox. I'd like to be able to close the colorbox and reopen it. But opening the box again, the events do not work any more.

Minimal example:

(function() {
    var $content = jQuery('<button>Test</button>');
    $content.on('click', function(){jQuery.colorbox.close()});
    jQuery.colorbox({
        width: '90%',
        height: '90%',
        html: $content
    });
    var $reopen = jQuery('<button>Reopen</button>');
    jQuery(document.body).append($reopen);
    $reopen.on("click", function() {
        jQuery.colorbox({
            width: '90%',
            height: '90%',
            html: $content
        });
    });
})()

With the code above, I open a colorbox and I can use the $content button to close the box (or doing something else). If I close the box and Reopen it withe the $reopen button, the on-click-event on $content does not work any more.

Any idea how to solve the problem? To test the example code, you can use http://www.jacklmoore.com/colorbox/example1/ to have the required libs jquery and colorbox included.

Answer 1

The problem is the removing of the content, if colorbox is closed. A workaround is using the inline option to get the desired effect:

(function() {
    var $content = jQuery('<button>Test</button>');
    $content.on('click', function(){jQuery.colorbox.close()});
    jQuery.colorbox({
        width: '90%',
        height: '90%',
        inline: true,
        href: $content
    });
    $reopen = jQuery('<button>Reopen</button>');
    jQuery(document.body).append($reopen);
    $reopen.on("click", function() {
        jQuery.colorbox({
            width: '90%',
            height: '90%',
            inline: true,
            href: $content
        });
    });
})()

Using the inline option and moving the node from html to href saves your event handlers and allows you to reuse the node later. Colorbox replaces the $content with a dummy <div> and switches back on calling close().