javascript - 在外部单击时隐藏 DIV

Question

我有一个动态生成的表单系统。

下面的代码是调用日历的按钮。

<input id="btn1_0" type="button" value="☵" class="rsform-calendar-box btnCal rsform-calendar-button btn btn-default" onclick="RSFormPro.YUICalendar.showHideCalendar('cal1_0Container');">

这是单击上述按钮时显示的 div。 在 div 内单击 时，按钮会切换样式 display:none:

<div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single">
Calendar Here
</div>

我也想在有人点击 div 外部时隐藏日历。

我试过这个 JS，但它不会工作，因为它将 display:none 设置为 div。我做错了什么？

jQuery(document).click(function(event) {
    if ( !jQuery(event.target).hasClass('yui-calcontainer')) {
         jQuery(".yui-calcontainer").hide();
    }
});

Answer 1

您不能将点击事件绑定(bind)到文档。将其绑定(bind)到 body 上。

jQuery('body').click(function(event) {
    if ( !jQuery(event.target).hasClass('yui-calcontainer')) {
         jQuery(".yui-calcontainer").hide();
    }
});

or

jQuery(document).on('click', 'body', function(event) {
    if ( !jQuery(event.target).hasClass('yui-calcontainer')) {
         jQuery(".yui-calcontainer").hide();
    }
});