Search code examples
jqueryeventshtmlclickablepropagation

jquery: keep <a> link clickable in clickable div


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!


Solution

  • 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')
    });