JavaScript：从javascript调用锚标记的点击事件

Question

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.

Answer 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.

Answer 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.

Answer 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();

Answer 4

I believe this is what you're after:

var proxyImgSrc="CostMetrics.aspx?Model=" + model +"&KeepThis=true&TB_iframe=true&height=410&width=650";
$("#proxyAnchor").attr('href', proxyImgSrc).trigger("click");;

Answer 5

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

Answer 6

If you are looking for support of IE, then this example below may help:

suppose you have the blob document in response object:

                 var blob = new Blob([response.responseText], { type: headers['content-type'] });
            if (navigator.msSaveOrOpenBlob) {
                //Launches the associated application for a File or Blob saving for non webkit based browser such as safari or IE
                navigator.msSaveOrOpenBlob(blob, "cvSummary.xml");
            }
            else {
                //code for webkit based browser
                var link = document.createElement('a');
                document.body.appendChild(link);
                link.style = "display: none";
                var url = window.URL.createObjectURL(blob);
                link.href = window.URL.createObjectURL(blob);
                link.download = "cvSummary.xml";
                link.dataset.downloadurl = ["text/xml", link.download, link.href].join(':');
                link.click();
                window.URL.revokeObjectURL(url);
            }