Develop Reference

Prevent a standard a href/jquery click combo from appending # to the url?

I have a standard link setup that fires an event via jquery when clicked
Click Me
All that works great, except that when the pseudo URL is clicked, it appends a hashtag (#) to the url. This hashtag affects how my page reloads if the user decides to refresh the page later on, so i'd like to not have the hashtag appended to the url.
is this possible while still allowing my normal jquery to fire?
Thanks!

You should either return false; from the event handler of A tag
Or, use
Click Me
For those who thinks javascript: void(0) is bad practice
If you use href='#', you must take care of two things
// one
function fn() {
// code
return false;
}
// two
click
And if you forget and just write onclick="fn();" it won't work
Another thing why I used javascript: void(0); is, if the function encounters/throws an error, it wont return false
So if you're a lone developer then you can clearly make your own choice, but if you work as a team you have to either state:
Use href="#", make sure onclick always contains return false; at the end, that any called function does not throw an error and if you attach a function dynamically to the onclick property make sure that as well as not throwing an error it returns false.
OR
Use href="javascript:void(0)"
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

In end of the you click function, use:
return false;

smartass anwser: use a button.
alternative: you must make sure to trigger the preventDefault in youre jQuery event handler
$("dosomthing").click(function(e){
//make magic happen
e.preventDefault()
})
this works on html forms thats submitting and such.
note on the button thing
it is best pratice to only use a tags for link (somthing that changes the url) and buttons for other sorts of interactions.
search bots and other web crawlers expect a tags to link to a other html document (hyperlink) and up to and including html 4. or to a other point in the current document.

Does it need to be an href at all? you could do:
<span class="dosomething">Click me</span>
.
.dosomething{cursor:pointer}

Wrote alternative to jQuery Accordion, it spazzed. Why?

I wrote an alternative to the jQuery Accordion, as that didn't offer multiple open section support (any idea why they opted to not include support for that? What's the history there?). I did some research on StackOverflow, as well on Google to see what other options others came up. I needed something that could be used on the fly on multiple elements.
After seeing several solutions and experimenting with them, in the end, I wrote my own version (based on Kevin's solution from http://forum.jquery.com/topic/accordion-multiple-sections-open-at-once , but heavily modified).
jsFiddle can be found here: http://jsfiddle.net/3jacu/1/
Inline Code:
$(document).ready(function(){
$.fn.togglepanels = function(){
return this.each(function(){
h4handler = $(this).find("h4");
$(h4handler).prepend('<div class="accordionarrow">▼</div>');
$(h4handler).click(function() {
$(h4handler).toggle(
function() {
barclicked = $(this);
$(barclicked).find(".accordionarrow").html('►');
$(barclicked).next().slideUp('slow');
window.console && console.log('Closed.');
return false;
},
function() {
barclicked = $(this);
$(barclicked).find(".accordionarrow").html('▼');
$(barclicked).next().slideDown('slow');
window.console && console.log('Open.');
return false;
}
);
});
});
};
$("#grouplist").togglepanels(); }
Oddly, the accordion arrow at the right side stopped working once I pasted it in jsFiddle, while it works in my local copy.
In any case, the issue is that toggling isn't working as expected, and when it does, it fires duplicate toggle events which result in it closing, opening, then ultimately closing the section and it won't open from that point on (it toggles open then closes back). That's assuming it works! At first, it won't work as it doesn't respond. I think there's a logic error somewhere I'm missing.
From what I wrote/see in the code, it searches the given handle for the corresponding tag (in this case, h4), pops the handle into a variable. It then adds the arrow to the h4 tag while applying the accordionarrow class (which floats it to the right). It then adds a click event to it, which will toggle (using jQuery's toggle function) between two functions when h4 is clicked.
I suspect the problem here is that I may be mistakenly assuming jQuery's toggle function will work fine for toggling between two functions, that I'll have to implement my own toggle code. Correct me if I'm wrong though!
I'm trying to write the code so it'll be as efficient as possible, so feedback on that also would be appreciated.
Thanks in advance for your time, assistance, and consideration!

You have the toggle binding (which is deprecated by the way) inside of the click binding, so a new event handler is getting attached every time you click the header.
As a random aside you should also fire events within the plugin (where you have the console lines would make sense) so that external code can react to state changes.

I believe your issue is the $(h4handler).click(function() { you have wrapped around the toggle listener. Essentially what this was doing was making so every click of the tab was adding the toggle listener, which was then also firing an event. Removing the click listener will have the behaviour you expect.

You forgot to paste the trailing characters ); to close the function call to jQuery function ready. Fixed: http://jsfiddle.net/LeZuse/3jacu/2/
UPDATE: I've just realised I did not really answer your question.
You are duplicating the .toggle functionality with binding another .click handler.
The doc about .toggle says:
Description: Bind two or more handlers to the matched elements, to be executed on alternate clicks.
Which means the click event is already built in.
NOTE: You should use local variables instead of global, so your plugin won't pollute the window object. Use the var keyword for this:
var h4handler = $(this).find("h4");

Trigger javascript in href attribute with jQuery .click() (or similar)

Unfortunately, I'm working with some 3rd party javascript, which inserts links into my pages. Rather than just use these links as is, I want to use proxy elements, which, when clicked, trigger the click event on the 3rd party links.
The 3rd party links pack javascript into the href attribute, like this:
<a id="horribleLink" href="javascript:doSomething()">Click me</a>
My proxy element looks like this:
<button rel="horribleLink" class="linkProxy">No, click me</button>
And a bit of jQuery'd javascript to link them together:
$('button.linkProxy').click(function(){
$('#' + $(this).attr('rel')).click();
});
Now, this works perfectly if the 3rd party link is just a standard link (<a id="horribleLink" href="http://www.google.com">Click</a>), or a slightly less horrible onclick (Click), but when the javascript is inside the href attribute, triggering 'click' does nothing at all.
Can anyone tell me why, and if there's a reasonable workaround?
Updated As Millimetric said, the root cause looks to be that browsers prevent 'faking clicks' on anchors - I've removed my 'standard link' example, as that's another situation that doesn't work. The onclick handler does work, though, as you'd expect.

The accepted answer here goes into a little depth as to "why this is happening": Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?. Basically, it seems you can't do a click() on a link because the browser doesn't support fake clicking.
One Work-around:
If you set location.href for those cases, it works:
$('button.linkProxy').click(function(){
location.href = $('#' + $(this).attr('rel')).attr('href');
});
Working fiddle: http://jsfiddle.net/uv29x/3/
Two Work-around:
You could just get the href of those links and do an eval() on them, right?

Set window.location to the href value.
$('button.linkProxy').click(function(){
window.location = $('#'+$(this).attr('rel')).attr('href');
});
DEMO: http://jsfiddle.net/dmSUm/

I'd just finished typing this up when I saw Milimetric's answer . Here's the code anyway for what it's worth -
eval($('#horribleLink').attr('href').replace('javascript:',''));

Use the native Javascript click method and you've got yourself a working click!
$('button.linkProxy').click(function(){
$('#' + $(this).attr('rel')).click()[0].click();
});
I kept the jQuery click assuming that Javascript click will bypass jQuery triggers in which case you'll want to keep both. Otherwise, if I'm wrong (or you don't need to account for trigger) you can reduce it to:
$('button.linkProxy').click(function(){
$('#' + $(this).attr('rel'))[0].click();
});

If I understand correctly the question, the issue is that you have something like this:
Test
And you claim that when the javascript is on the href, the onclick event is not fired. Correct? If so, what I am seeing is that both get fired, first onclick and then the javascript inside href.

jQuery - Add e.preventDefault() to all links click events?

I'm making a script in jQuery, and I have many click links click events. The thing is that I don't want the links I have click events for to do anything except the event, so I put an e.preventDefault(); at start of all my click events. But I have many click events, so is there a more simple way to just add the e.preventDefault(); to all the links click events? Remember I also have some links that I want to work as they should, so adding the e.preventDefault(); to all the links won't work, I only want to add it to links with click event.

you can use jquery namespaced events
http://docs.jquery.com/Namespaced_Events
HTH
you can do something like this for the links you want to add a click event but prevent the default behaviour
$('a.someClass').bind('click.dontClick',function(e){
e.preventDefault();
});
and for the links you want the normal click behaviour
$('a.clickClass').bind('click.doClick',function(e){
//your event handling code here
});
DEMO

You could try overriding the bind method, or the click method, before any of your binding code runs. Here I'm overriding the click method in a fairly hacky way. I would really recommend just calling preventDefault where you need it.
(function(){
var original = jQuery.fn.click;
jQuery.fn.click = function(){
// wrap your function in another function
var f = arguments[0];
arguments[0] = function(e) {
e.preventDefault();
f(e);
}
original.apply( this, arguments );
}
})();
Example in action: http://jsfiddle.net/k4jzb/

This SO answer details how to detect events on an element, but it looks like the asker took that answer and built a jQuery plugin for selecting elements based on their event listeners.
So you could use that plugin and then use some event delegation like so:
$(document).delegate('a:Event(click)', 'click', function (e) { e.preventDefault(); });
Warning: I've never used this plugin myself, and I'm not really familiar with custom jQuery CSS filters, so this might not actually work. At all.

I would take #3nigma's answer a little further. Usually the links you don't want to do default actions on are like <a href="#">
So filter out these links so the page doesn't jump when clicked. I use jQuerys filter() function. Not sure if that is the best. What do you think?
$('a').filter(function(i) {
return $(this).attr("href") === "#";
})
.bind('click.dontClick',function(e){
e.preventDefault();
})
Example here: Filter a tags containing #

How to prevent a click on a '#' link from jumping to top of page?

I'm currently using <a> tags with jQuery to initiate things like click events, etc.
Example is Text
But I hate how the '#' makes the page jump to the top of the page. What can I do instead?

So this is old but... just in case someone finds this in a search.
Just use "#/" instead of "#" and the page won't jump.

In jQuery, when you handle the click event, return false to stop the link from responding the usual way prevent the default action, which is to visit the href attribute, from taking place (per PoweRoy's comment and Erik's answer):
$('a.someclass').click(function(e)
{
// Special stuff to do when this link is clicked...
// Cancel the default action
e.preventDefault();
});

you can even write it just like this:
im not sure its a better way but it is a way :)

Solution #1: (plain)
Text
Solution #2: (needed javascript)
Text
Solution #3: (needed jQuery)
Text
<script>
$('a.someclass').click(function(e) {
e.preventDefault();
});
</script>

You can use event.preventDefault() to avoid this. Read more here: http://api.jquery.com/event.preventDefault/.

Just use <input type="button" /> instead of <a> and use CSS to style it to look like a link if you wish.
Buttons are made specifically for clicking, and they don't need any href attributes.
The best way is to use onload action to create the button and append it where you need via javascript, so with javascript disabled, they will not show at all and do not confuse the user.
When you use href="#" you get tons of different links pointing to the same location, which won't work when the agent does not support JavaScript.

If you want to use a anchor you can use http://api.jquery.com/event.preventDefault/ like the other answers suggested.
You can also use any other element like a span and attach the click event to that.
$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

$('a[href="#"]').click(function(e) {e.preventDefault(); });

You can use #0 as href, since 0 isn't allowed as an id, the page won't jump.
Text

There are 4 similar ways to prevent the page from jumping to the top without any JavaScript:
Option 1:
Link
Option 2:
Link
Option 3:
Link
Option 4 (Not recommended):
Link
But it's better to use event.preventDefault() if you are handing the click event in jQuery.

Just use
Text
JQUERY
$('.someclass').click(function(e) { alert("action here"); }

If the element doesn't have a meaningful href value, then it isn't really a link, so why not use some other element instead?
As suggested by Neothor, a span is just as appropriate and, if styled correctly, will be visibly obvious as an item that can be clicked on. You could even attach an hover event, to make the elemnt 'light up' as the user's mouse moves over it.
However, having said this, you may want to rethink the design of your site so that it functions without javascript, but is enhanced by javascript when it is available.

Links with href="#" should almost always be replaced with a button element:
<button class="someclass">Text</button>
Using links with href="#" is also an accessibility concern as these links will be visible to screen readers, which will read out "Link - Text" but if the user clicks it won't go anywhere.

You could just pass an anchor tag without an href property, and use jQuery to do the required action:
<a class="foo">bar</a>

I have used:
Text

I've always used:
Some text
when trying to prevent the page jump. Not sure if this is the best, but it seems to have been working well for years.

The #/ trick works, but adds a history event to the browser. So, clicking back doesn't work as the user may want/expect it to.
$('body').on('click', 'a[href="#"]', function(e) {e.preventDefault() }); is the way I went, as it works for already existing content, and any elements added to the DOM after load.
Specifically, I needed to do this in a bootstrap dropdown-menu inside of a .btn-group(Reference), so I did:
$('body').on('click', '.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });
This way it was targeted, and didn't affect anything thing else on the page.

You can also return false after processing your jquery.
Eg.
$(".clickableAnchor").live(
"click",
function(){
//your code
return false; //<- prevents redirect to href address
}
);

I use something like this:
Text

To prevent the page from jumping, you need to call e.stopPropagation(); after calling e.preventDefault();:
stopPropagation prevents the event from going up the DOM tree. More info here: https://api.jquery.com/event.stoppropagation/

If you want to migrate to an Anchor Section on the same page without page jumping up use:
Just use "#/" instead of "#"
e.g
Home
About
contact page will not jump up on click..

Adding something after # sets the focus of page to the element with that ID. Simplest solution is to use #/ even if you are using jQuery. However if you are handling the event in jQuery, event.preventDefault() is the way to go.

The Link and Link does not work if one has to click on the same input more than once.. it only takes in 1 event click for each on multiple inputs.
still the best way to go is with Link
then,
event.preventDefault();

The simplest one for me was to do this.
Some text
The reason for using JS is that most modern sites rely on it.