Question

我有一个小功能，可以在彩盒中打开。我希望能够关闭彩盒并重新打开它。但是再次打开盒子，事件不再起作用了。

最小例子：

(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
        });
    });
})()

使用上面的代码，我打开一个颜色框，我可以使用$content按钮关闭框（或做其他事情）。如果我关闭此框并使用$reopen按钮重新打开它，则$content上的点击事件将无法使用。

知道如何解决问题吗？要测试示例代码，可以使用http://www.jacklmoore.com/colorbox/example1/包含所需的libs jquery和colorbox。

Answer 1

问题是如果关闭彩色框，则删除内容。解决方法是使用内联选项来获得所需的效果：

(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
        });
    });
})()

使用内嵌选项并将节点从 html 移至 href 可保存您的事件处理程序，并允许您稍后重复使用该节点。 Colorbox用虚拟$content替换<div>，然后重新调用close()。

Colorbox关闭，重新打开并保留事件

1 个答案: