title: Jquery .closest() on Bootstrap Datepicker returning undefined
body: <p>I'm working with the <a href="https://bootstrap-datepicker.readthedocs.org/en/release/index.html" rel="nofollow noreferrer">Bootstrap Datepicker</a> and I'm trying to close the popup I have when there's a click outside of the modal. The problem I'm having is that clicks on the table <code>&lt;td&gt;</code> elements don't return the parent div its in when I use <code>$(e.target).closest('.datepicker')</code>. If I click the blue box around it (also a child element) it returns the parent div but not for clicks in the table. </p>
  
  <p><a href="http://jsfiddle.net/tuG6C/662/" rel="nofollow noreferrer">http://jsfiddle.net/tuG6C/662/</a></p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('body').click(function(e){
      console.log($(e.target).closest('.datepicker')[0]); 
  });    
  
  $(document).ready(function() {
      $('.datepicker').datepicker({
          startDate: new Date()
      });
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="datepicker"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.datepicker {
      padding: 20px;
      background: aliceblue !important;
      display: inline-block;
  }
  table {
      background: #fff;
  }
  </code></pre>
  
  <p>Screencast of the problem. I'm trying to avoid the <code>undefined</code> output.</p>
  
  <p><img src="https://i.stack.imgur.com/b9gSW.gif" alt="enter image description here"></p>