How do you selectively disable jquery's on() trigger?
<p>I have the following puzzle, and am guessing the solution is pretty obvious to some.</p>

<p>The idea is this: There's a list of articles. Each article initially has only the excerpt showing. Clicking anywhere in the article hides the excerpt and shows the full story, with photo. Clicking the article again (or another article) would close that open article, and re-show the excerpt.</p>

<p>Trouble is, I'm also using fancybox to enlarge the image. When I click the image thumbnail, I get the undesired effect of also closing the article.</p>

<p>How do you disable the jquery "on()" call for image clicks, while leaving the fancybox triggering intact?</p>

<p>p.s. Not sure the code below works, it's a simplification of something that does work...</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;article&gt;
    &lt;h1&gt;Article One&lt;/h1&gt;
    &lt;div class="first"&gt;
        Article excerpt
    &lt;/div&gt;
    &lt;div class="second" style="display:none"&gt;
        &lt;a href="#" class="fancybox"&gt;&lt;img src="blah.jpg"&gt;&lt;/a&gt;
        Article in full
    &lt;/div&gt;
&lt;/article&gt;

&lt;article&gt;
    &lt;h1&gt;Article Two&lt;/h1&gt;
    &lt;div class="first"&gt;
        Article excerpt
    &lt;/div&gt;
    &lt;div class="second" style="display:none"&gt;
        &lt;a href="#" class="fancybox"&gt;&lt;img src="blah.jpg"&gt;&lt;/a&gt;
        Article in full
    &lt;/div&gt;
&lt;/article&gt;
</code></pre>

<p><strong>JAVASCRIPT</strong></p>

<pre><code>&lt;script&gt;
$(function(){

    $('article').on('click',function(){
        $('div').hide();
        $('div.excerpt').show();
        $(this).hide();
        $(this).closest('div').fadeIn();
    });

    $('.fancybox').fancybox();
});
&lt;/script&gt;
</code></pre>

<p>The following image shows the two states ... before and after click.</p>

<p><img src="http://i.stack.imgur.com/LdxiH.png" alt="sample"></p>
