JavaScript: Invoking click-event of an anchor tag from javascript

I have a page with an anchor tag. In my JavaScript I am setting the HREF attribute of the anchor tag dynamically based on some if-else conditions. Now I want to invoke the click event of the anchor tag programmatically. I used the below code, but was not successful.

var proxyImgSrc="CostMetrics.aspx?Model=" + model +"&KeepThis=true&TB_iframe=true&height=410&width=650";

document.getElementById("proxyAnchor").href=proxyImgSrc;
document.getElementById("proxyAnchor").onclick;

Can any one tell me how to go ahead? I have a jQuery light box implementation(thickbox) on this link.

Kindly advise. Thanks in advance.

Solution 1:

If you have jQuery installed then why not just do this:

$('#proxyAnchor')[0].click();

Note that we use [0] to specify the first element. The jQuery selector returns a jQuery instance, and calling click() on that only calls click javascript handler, not the href. Calling click() on the actual element (returned by [0]) will follow the link in an href etc.

See here for an example to illustrate the difference: http://jsfiddle.net/8hyU9/

As to why your original code is not working - it is probably because you are calling onclick, and not onclick(). Without the parenthesis JavaScript will return whatever is assigned to the onclick property, not try to execute it.

Try the following simple example to see what I mean:

var f = function() { return "Hello"; };     
alert(f);
alert(f());

The first will display the actual text of the function, while the second will display the word "Hello" as expected.

Solution 2:

You should call click event like this:

document.getElementById("proxyAnchor").click();
// $('#proxyAnchor').click();

but in your case you should set the window's location to a redirect page, if you want that.

Solution 3:

I believe you want to invoke the click event. Not the "onClick." Also, be sure to include the parenthesis () when you're invoking a method. Don't confuse methods (which end with ( and )) with attributes and properties which do not end with ( and ).

// Using jQuery - Which you tagged...
$("#proxyAnchor").attr("href", proxyImgSrc).click();

Solution 4:

For an immediate page change, you can also do this:

var proxyImgSrc= "CostMetrics.aspx?Model=" + model + "&KeepThis=true&TB_iframe=true&height=410&width=650";
window.location = proxyImgSrc;

Here's an example from W3 Schools: http://www.w3schools.com/js/tryit.asp?filename=tryjs_location