取消绑定jQuery事件仅起作用一次

Question

我有一个全屏谷歌地图，然后我有一个弹出窗口。 我想要的是当我单击除弹出窗口以外的任何内容或按esc时弹出窗口消失。

下面的代码只能运行一次。 我可以打开弹出窗口并关闭它，但是之后它不会再次打开。

   var hideBlogContent = function () {
        $(document).on('click', function (e) {
            if ($(e.target).closest($("#blogpost")).length === 0) {
                $("#blogpost").hide();
                $(document).unbind();
                $(document).off();
            }
        });

        $(document).on('keydown', function (e) {
            if (e.keyCode === 27) { // ESC
                $("#blogpost").hide();
                $(document).unbind();
                $(document).off();
            }
        });

我怎样才能使其每次工作？

Answer 1

使用名称空间， 检查文档的on()以获得更多信息。当前，您的.off()函数正在关闭文档上的所有绑定。 但是使用命名空间，您可以关闭特定的事件绑定。

$(document).on('click.closeMap', function (e) {
        if ($(e.target).closest($("#blogpost")).length === 0) {
            $("#blogpost").hide();
            $(document).off('click.closeMap');
        }
    });

$(document).on('keydown.closeMap', function (e) {
    if (e.keyCode === 27) { // ESC
        $("#blogpost").hide();
        $(document).off('keydown.closeMap');
    }
});

另外，这里的unbind()是多余的。