Can't use nested anchor

Question

Ok. I've got the following script:

$('#exhibitions .item.plain').toggle(
    function() {
        $(this).css({
           'height': '302px',
           'z-index': '10',
           'background': '#3F94AB'
        });
        $(this).find('p.title').css('color', '#E6E6E6');
        $container.isotope('reLayout');
    },
    function() {
        $(this).css({
           'height': "130px", 
           'z-index': '0',
           'background': '#CCC'
    });
    $(this).find('p.title').css('color', '#353334');
    $container.isotope('reLayout');
});

Whereas .item.plain is given to a div with nested anchor. And when I click it which is obvious )) toggle() is fired.

<div class="item plain">
     <!-- some stuff -->
     <a href="url I want to go"></a>
</div>

How do I fix this?

Thanks!

possible duplicate of [How do I prevent a parent's onclick event from firing when a child anchor is clicked?](http://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli) and [Prevent click from child firing parent click event](http://stackoverflow.com/q/6929198/218196) and [Prevent click from child firing parent click event](http://stackoverflow.com/q/6929198/218196) and [Jquery click event propagation](http://stackoverflow.com/q/2244320/218196) — Felix Kling, May 24 '12 at 12:55
and [How to prevent children click on parent click](http://stackoverflow.com/q/8484847/218196) and [click on link should not trigger parental onclick-event](http://stackoverflow.com/q/5590944/218196) and [select the DIV but not the link inside it, jQuery question](http://stackoverflow.com/q/3838758/218196). — Felix Kling, May 24 '12 at 12:58
@Felix good point, but I don't think the OP knew what was going on, so I'd consider this a legitimate question. — Wizard of Ogz, May 24 '12 at 13:04
@helicera It's important to understand how events work in the browser. Here's a brief explanation http://www.quirksmode.org/js/events_order.html, and there are many other resources online. — Wizard of Ogz, May 24 '12 at 13:07

score 4 · Accepted Answer · answered May 24 '12 at 12:54

4

If I well understood you don't want to toggle the element .item.plain when you click over the link, so stop the propagation of the event in this way

$('#exhibitions .item.plain a').on('click', function(evt) {
   evt.stopPropagation();
});

answered May 24 '12 at 12:54

Fabrizio Calderan

120,726
26
164
177

Can't use nested anchor

1 Answers1