We Keep Coding

How to execute onClick and href both in an anchor tag (<a>)

I have a link as follows:
Click me
On clicking the link, it's executing the JavaScript function, but it is not taking me to the href link.
How can I achieve the same?

I think the easiest way to do it is to make your function return true, so that after the function is complete, the anchor tag will behave like it normally does. This way you can also use the target-attribute if you want to use new window:
function myFunction() {
alert("hello");
return true;
}
Click me

I used jQuery, and I hope it's still understandable:
<a href="www.google.com" onClick=someFunction()>Click me </a>
It's executing the JavaScript function, but it is not taking me to the href link.
So one way is to add the redirection after your function:
function someFunction()
{
... Your code ...
window.location.href($(this).attr('href')); // <----- HERE
}
UPDATE AFTER COMMENT:
function someFunction()
{
... Your code ...
window.open($(this).attr('href'), '_blank'); // <----- HERE
}

You could do this a few ways,
<div onclick = "function();">link here </div>
or you could just use onclick on the a itself
link here
You're putting the onclick inside of the tags which is just for text. Place it in the first to use it as an attribute of the tag.
As Esko posted, in the function return true if you want the href to execute as well.

When the click event is attached on an anchor tag, it is handled by browser in a 'special' way.
The .click is not supposed to work with 'a' tags, because the browser does not support "fake clicking" with JavaScript.
I mean, you can't "click" an element with JavaScript. With 'a' tags you can trigger its onClick event, but the link won't change colors (to the visited link color, the default is purple in most browsers).
So it wouldn't make sense to make the "click" event work with 'a' tags since the act of going to the href attribute is not a part of the onClick event, but hardcoded in the browser.
But you can do some customization to an onclick handler so as to refer href link.
Let's have an example for it:
$('a').click(function () {
window.open($(this).attr('href'));
});
Here is the http://jsfiddle.net/4Qku8/ demonstrating the same using jQuery.
For further details, please refer to Stack Overflow question Can I call jQuery's click() to follow an link if I haven't bound an event handler to it with bind or click already?.

Jquery toggle, if javascript is disabled take user to a page

I have a div that appears and disappears through the use of a jquery toggle. When yuo click a link the div appears or disappears.
Is there a way to make it so if javascript is disabled and a user clicks the link they are taken to a page instead?
Is there anything I should do when using a toggle to ensure it doesn't encounter problems?

Make the link take the user where you want them to go if js is disabled by default. Then use jQuery's preventDefault() on the click event (where you are probably defining your toggling behavior).
So the link should work on its own:
<a id="functioning-link" href="/js_disabled_page">Toggle my div</a>
Your jQuery should grab the click event to toggle your div, which will only work if jQuery/js is enabled:
$(function(){
$("#functioning-link").click(function(e){
e.preventDefault();
$("div").toggle();
});
});

You can use both href and onClick for this.
If the javascript is disabled, href fires up
else onClick!
For example:
Click to toggle
Javascript:
toggle = function() {
// Your code here
return false;
}

Can I use href like an onclick?

I just can not figure a way to use location.href to act like you're clicking on a link.
What I am trying to do is get the variables included, for example,
The regular link is like this and works fine:
Click Me
I am trying to call a function using href (or some other method) to open the image with the other parameters just as if you were to click on the link.
I hope I am explaining this correctly.
Thanks for any help.
-UPDATE-
I finally found my solution here Displaying the Popup box generated by Greybox on page load(onLoad)
Thank you all for your suggestions.

Add an onclick event to your link. Using JQuery, you could ofcourse bind the click event to the links, and use .preventDefault() to block the anchor tag workin. Much cleaner code also.
$(document).ready(function(){
$('a').bind('click', function(e){
e.preventDefault();
//do whatever you wish to do
});
});

Answer: Yes.
Click Me

location.href or window.location.href refers to the browsers current address. If you change the value of location.href the browser will use that value as it's address. So if you want to navigate your browser to a link programmatically, you just have to change its value.
If you just want a clickhandler for your link don't use onclick or href, that's just bad practice, use a sepperate script that does this unobtrusively like so:
var button = document.getElementById('button');
button.onclick = function(){
do_something();
}

<a onclick="yourJSFunction();return false" href="images/someImage.jpg" title="My Image" rel="gb_page_center[249, 266]">Click Me</a>
You just need to add an onclick attribute to your anchor tag.
Make sure to return false or else the anchor tag will go to the URL like normal.

How do I simulate clicking a link that opens in a new tab/window using jQuery/Javascript?

I have a link that opens in a new tab with _blank:
link
I'd like to be able to 'click' on this from Javascript. I know I could do document.location=... but the problem here is the new tab part. Is this possible?

You can usually open a new window or tab using window.open. So instead of setting location, just call window.open and pass only the URL, nothing else.

$("#your_a").click(function(e) {
e.preventDefault();
window.open($(this).attr("href"), this.target);
}
You could use any name for target, preventDefault() if you want to override the link actions completely

If you really want to simulate click, you can give a id to the anchor tag and call jQuery click() on that element.
<a id="mylink" href="new_page.html" target="_blank">link</a>
and in script
$("#mylink").click()

to "simulate" the click you trigger the click event:
HTML:
click me
jQuery:
$("#mylink").trigger("click");
-or-
$("#mylink").click();
Using 'trigger' allows you to pass in extra parameters if you bind a function to the click event. See the jQuery 'trigger' documentation for more info: http://api.jquery.com/trigger/

jQuery HTML Anchor Tag Progressive Enhancement

I have jQuery that I have written that is supposed to find a particular <a> tag and change its behavior. Before jQuery loads, the <a> tag has an href attribute that points to another page. I am using jQuery to change the behavior of the <a> tag so that rather than directing the browser to load that other page, it instead runs javascript when clicked that loads content dynamically in a <div> that is positioned at the location of the mouse pointer.
So, for example, I have the following:
<a class="funk" href="http://example.com/page2.html">Link</a>
<div class="hidden bubble">Load this instead.</div>
The jQuery I have running does the following:
$(document).ready(function(){
$('.bubble').hide()
$('.bubble').removeClass('hidden');
$('.funk').attr('href', '#');
$('.funk').click(function(e){
$('.bubble').show();
})
})
The problem I have is: Whenever the user clicks the link, the browser acts on the href="#" attribute and brings scrolls the browser to the top of the page. What is the most "correct" way to make my site so that the browser does not scroll at all, but instead merely executes the jQuery code that I have written for the click event?

Let the 'click' function return false. That cancels the event, and the browser doesn't follow the link. In this case, you can even let the href attribute at its original value.
$('.funk').click(function(e){
$('.bubble').show();
return false;
//--^
})
To be on the save side, you can explicitly cancel the event:
e.preventDefault(); // no default action
e.stopPropagation(); // event doesn't bubble up or down in the DOM

Add this to your click function:
$('.funk').click(function(e){
e.preventDefault();
e.stopPropagation();
$('.bubble').show();
});
This will do what is implied by the method names.

Call e.preventDefault() in the click handler.
http://api.jquery.com/event.preventDefault/