[英]jQuery different click() function for an element within another element with a click()
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. 在这些标签的
<li>
,我有一个jQuery click()
事件来切换标签。 Please see the screengrab for what I mean 请查看屏幕截图以了解我的意思
alt text http://cci.epiphanydev2.co.uk/Home_1281538687319.png 替代文字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>
一切正常,直到我们的设计师想要
<li>
的RSS feed链接,所以现在当我单击RSS feed图标时,它被<li>
上的click()
函数覆盖。
My jQuery so far for the tabs is as follows: 到目前为止,我的jQuery选项卡如下:
//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? 知道我如何解决这个问题吗?
使用event.stopPropagation()
event.stopPropagation() is what you're looking for: http://api.jquery.com/event.stopPropagation/ 您正在寻找event.stopPropagation(): 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. 您需要传递事件,然后将event.stopPropagation()放在供稿链接的click函数中。 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>
这将使click事件不再冒泡,直到包含父母,在您的情况下,选项卡
<li>
See a demo here: http://jsfiddle.net/kjdeG/ 在此处查看演示: http : //jsfiddle.net/kjdeG/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.