jQuery preventDefault() not triggered
Try this one:
$("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
return false;
});
Try this:
$("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
});
If e.preventDefault();
is not working you must use e.stopImmediatePropagation();
instead.
For further informations take a look at : What's the difference between event.stopPropagation and event.preventDefault?
$("div.subtab_left li.notebook a").click(function(e) {
e.stopImmediatePropagation();
return false;
});
Update
And there's your problem - you do have to click event handlers for some a
elements. In this case, the order in which you attach the handlers matters since they'll be fired in that order.
Here's a working fiddle that shows the behaviour you want.
This should be your code:
$(document).ready(function(){
$('#tabs div.tab').hide();
$('#tabs div.tab:first').show();
$('#tabs ul li:first').addClass('active');
$("div.subtab_left li.notebook a").click(function(e) {
e.stopImmediatePropagation();
alert("asdasdad");
return false;
});
$('#tabs ul li a').click(function(){
alert("Handling link click");
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div.tab').hide();
$(currentTab).show();
return false;
});
});
Note that the order of attaching the handlers has been exchanged and e.stopImmediatePropagation()
is used to stop the other click handler from firing while return false
is used to stop the default behaviour of following the link (as well as stopping the bubbling of the event. You may find that you need to use only e.stopPropagation
).
Play around with this, if you remove the e.stopImmediatePropagation()
you'll find that the second click handler's alert will fire after the first alert. Removing the return false
will have no effect on this behaviour but will cause links to be followed by the browser.
Note
A better fix might be to ensure that the selectors return completely different sets of elements so there is no overlap but this might not always be possible in which case the solution described above might be one way to consider.
I don't see why your first code snippet would not work. What's the default action that you're seeing that you want to stop?
If you've attached other event handlers to the link, you should look into
event.stopPropagation()
andevent.stopImmediatePropagation()
instead. Note thatreturn false
is equivalent to calling bothevent.preventDefault
andevent.stopPropagation()
refIn your second code snippet,
e
is not defined. So an error would thrown ate.preventDefault()
and the next lines never execute. In other words$("div.subtab_left li.notebook a").click(function() { e.preventDefault(); alert("asdasdad"); return false; });
should be
//note the e declared in the function parameters now $("div.subtab_left li.notebook a").click(function(e) { e.preventDefault(); alert("asdasdad"); return false; });
Here's a working example showing that this code indeed does work and that return false
is not really required if you only want to stop the following of a link.