返回undefined的Bootstrap Datepicker上的Jquery .closest（）

Question

我正在使用Bootstrap Datepicker，我正试图在模式外点击时关闭弹出窗口。我遇到的问题是当我使用<td>时，对表$(e.target).closest('.datepicker')元素的点击不会返回父div。如果我单击它周围的蓝色框（也是子元素），它将返回父div，但不返回表中的点击。

http://jsfiddle.net/tuG6C/662/

JS

$('body').click(function(e){
    console.log($(e.target).closest('.datepicker')[0]); 
});    

$(document).ready(function() {
    $('.datepicker').datepicker({
        startDate: new Date()
    });
});

HTML

<div class="datepicker"></div>

CSS

.datepicker {
    padding: 20px;
    background: aliceblue !important;
    display: inline-block;
}
table {
    background: #fff;
}

问题的截屏视频。我试图避免undefined输出。

Answer 1

我遇到了完全相同的问题。经过几个小时的挫折，发现它不起作用，因为点击的目标不是你期望的目标（在'.datepicker'下）。

相反，点击的<td>的父级是<tr>，其中包含NO parentNode，这样可以确定我们是否在弹出窗口中非常难 - 可以尝试搜索DOM来查找元素，但我甚至不知道它是否会存在。

这里使用的解决方案是检查是否

$(e.target).closest('body').length == 0

在这种情况下，弹出窗口保持打开状态

请参阅this issue