jQuery different click() function for an element within another element with a click()

Question

on my website I have a sidebar panel, which has two tabs that when clicked switch the content beneath. on the <li> for these tabs I have a jQuery click() event to switch the tabs. Please see the screengrab for what I mean

alt text http://cci.epiphanydev2.co.uk/Home_1281538687319.png

This was all working fine until our designer wanted the RSS feed link within the <li>, so now when I click on the RSS feed icon, it is being overridden by the click() function on the <li>

My jQuery so far for the tabs is as follows:

//NEWS PANEL
$("div.switch-tab div.listing-box").hide();
$(".news ul.tabs li:first").addClass("active").show();
$("div.switch-tab div.listing-box:first").show();

$(".news ul.tabs li").click(function() {
    $(".news ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $("div.switch-tab div.listing-box").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false;
});
// ATTEMPT TO OVERRIDE
$(".news ul.tabs li a.feed").click(function() {
    return true;
});
//END NEWS PANEL

Any idea how I can get round this?

Ender · Accepted Answer · 2010-08-11 15:55:06Z

2

event.stopPropagation() is what you're looking for: http://api.jquery.com/event.stopPropagation/

You'll need to pass in the event and then put event.stopPropagation() in the click function of your feed links. So do something like this:

// ATTEMPT TO OVERRIDE
$(".news ul.tabs li a.feed").click(function(event) {
    event.stopPropagation();
    return true;
});

This will stop the click event from bubbling up to containing parents, in your case, the tab <li>

See a demo here: http://jsfiddle.net/kjdeG/

edited Aug 11, 2010 at 15:55

answered Aug 11, 2010 at 15:49

Ender

15.3k8 gold badges38 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Moura · Accepted Answer · 2010-08-11 15:23:57Z

2

Use event.stopPropagation()

answered Aug 11, 2010 at 15:23

Daniel Moura

7,9845 gold badges38 silver badges61 bronze badges

Collectives™ on Stack Overflow

jQuery different click() function for an element within another element with a click()

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related