jquery: keep <a> link clickable in clickable div

Phil picture Phil · Apr 5, 2011 · Viewed 15.4k times · Source

What I want to do is prevent the click on the div if a users clicks a link inside that div. but without using the .click(function() {}); on the link.

Here's the code:

$('div.feature').click(function() { window.location = $(this).attr('rel');});

here's an example content of the div:

<div id="feature" rel="urlnumberone">
some text
<a href="javascript:topicchange(this);" class="insideLink">Link</a>
</div>

And for some specific reason I can't use something like this

$('.insideLink').click(function(event){
    event.stopImmediatePropagation();
});

I have to use this "topicchange()" function, is there any way to prevent the event propagation?

Thanks!

Answer

shanethehat picture shanethehat · Apr 5, 2011

The example that you've provided should work, except that your div has an id of 'feature', but in the js you're targeting a class. jsfiddle.net/SNP3K.

<div id="feature" rel="urlnumberone">
    some text
    <a href="#" class="insideLink">Link</a>
</div>

.

$('div#feature').click(function() { 
    alert('div');
});

$('.insideLink').click(function(event){
    event.stopImmediatePropagation();
    alert('link')
});