Alternative <a href= "https://stackoverflow.com/#" rel="nofollow noreferrer"> when the anchor tag triggers the jQuery action only without redirecting the user?
I have many anchor tags on my page that trigger only jQuery actions on a single page.
Do not redirect the user to another location, which is the normal expected behavior of the anchor tag.
I do not want to have calm URLs in my application for every action. But I also donโt like sending the user to the top of the page every time they click on one of these <a href="#"> tags.
What is the best value to add inside the href value of the anchor tag except # ?
Is it possible to link to a fragment on a page that can act as a logical disconnect to an incomplete JavaScript action? If so, it makes sense to refer to <a href="#account"> and have id="account" on the page, which could work as a reserve.
Another option is to directly link to dynamically loaded content; That way, you can pretty conveniently use href in an Ajax call instead of hard coding to somehow request in JavaScript; <a href="/path/to/dynamic/content"> .
Finally, you cannot statically put <a href="#"> in HTML, but instead create it on the fly using jQuery, since it is still used by jQuery. No need to pollute markup with placeholders for JavaScript, if placeholders are used only for JavaScript in any case.
Regarding "sending the user to the top of the page"; you just need to return false from your function that you hooked as a click() handler;
$('a').click(function() { // Do your stuff. // The below line prevents the 'href' on the anchor to be followed. return false; }); You really have to use the <button> element for JS-only actions. They have a default action (if inside the form), but outside the form theyre exclusively for custom actions that you associate with the JS event handler.
If you have links that are not links, maybe they should not be links? :-) You can consider another user interface element that does not have default behavior (outside the form), for example, button (you can style buttons in a large degrees). Or you can use span or similar, but if you definitely set the appropriate available information (for example, ARIA role="link" ) so that you do not ruin the screen programs (and browser tabs).
But if you want to keep using <a href="#">...</a> , just attach a handler to them that calls event.preventDefault(); or returns false .
# excellent. But the calling calls should then return false .
// assigning a click callback to all anchors $('a').click(function(evt){ //... do stuff return false; // avoid jump to '#' }) I prefer to use:
<a href="javascript:">foo</a> if in fact this is not an ajax call to load a partial template, in this case I use something like this:
<a href="/link/to/page" onClick="ajax_request_to_partial(); return false;">foo</a> By returning false in the onclick event, you will see that the site is not reloaded, but it can still be used to open the URL on a new page.
If the anchor is useless for people who do not have javascript, they should not see it.
The best alternative is to create these links using jQuery when the page loads - so only those who see them are the ones who will use them.
In this case, having href="#" fine, as long as your event handler ends with return false; href will never follow
Have you tried to exclude the href parameter?
<a>Link title</a> This should work fine and not force the browser to load the web page or reposition the pages. In fact, it will not do anything if you do not have JavaScript to support it.
The href parameter is optional, so why enable it if you are not using it?
return false; Use this to stop sending the browser to the top of the page?
if you bind any action on click, you can call preventDefault () to avoid sending the user to the top of the page
$("a.clickable").live('click',function(){$(this).doSome(); $(this).preventDefault()}); I am using the code below and it works fine.
<div class="panel-heading">Definition <div class="pull-right"> <i class="fa fa-wrench"></i> <a id="step3Ad" href="javascript:void(0);">Advanced</a> </div> </div