title: How to make a click event on a specific div
body: <p>I have an image gallery (slider), like this:</p>
  
  <pre><code>&lt;div class="imgWrap current"&gt;
  
      &lt;img src="image1" /&gt;
  
  &lt;/div&gt;
  &lt;div class="imgWrap"&gt;
  
      &lt;img src="image2" /&gt;
  
  &lt;/div&gt;
  &lt;div class="imgWrap"&gt;
  
      &lt;img src="image3" /&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Then I have some events:</p>
  
  <pre><code>$(document).on('click', '.current img', function(){
  
      $('#anotherDiv').click();
  });
  </code></pre>
  
  <p>That all works fine.</p>
  
  <p>I tried now to make an event to click only the div (not the image), something like this:</p>
  
  <pre><code>$(document).on('click', $('div:not(img)'), function(){
  
      $('#anotherDiv2').click();
  });
  </code></pre>
  
  <p>My scenario is:</p>
  
  <p>I click on image to go to the next image, if I click outside from the image then they go back to the gallery. </p>
  
  <p>The <code>div imgWrap</code> filled the whole page and I can`t change the HTML code.</p>
  
  <p>Is that even possible?</p>