重新启用单击禁用单击的元素

Question

我有一个面板，当单击一个按钮时会打开，然后我会在单击文档时关闭面板。

我使用的代码忽略了面板元素及其内容，如果它们被单击作为文档点击的一部分。

我遇到的问题是我在容器内有一个关闭按钮，我指定要忽略它！

任何人都可以为此提供解决方法，以便内部按钮仍可正常运行吗？

 UtilityBar = (function() {
    var _self = {},
        recentPanel = $('#utils_recent'),
        recentButton = $('#utils_show_recent');
    function init() {
        bindEvents();
    }
    function bindEvents() {
        recentButton.on('click', toggleRecent);
        $(document).on('click', function(event) {
            if (!$(event.target).closest('.utils').length) {
                closePanels();
            }
        });   
        // This obviously doesn't work
        $('.utils_close').on('click', closePanels);
    }
    function toggleRecent(e) {
        e.preventDefault();
        recentPanel.toggleClass('is_open');
    }
    function closePanels() {
        recentPanel.removeClass('is_open');
    }
    _self = {
        init: init
    };
    return _self;
})();
$(function() {
    UtilityBar.init();
});

这是一个小提琴 - http://jsfiddle.net/kptwc82z/4/