How can I click the href link dynamically in firefox? The expected approach only works in IE

Question

http://jsfiddle.net/HVGre/1/ - test link.

---

I have an html link on my page that I need to dynamically click. This works fine with .click () in IE, but does not work in firefox. I can’t change the link to the button, so this is not an option, it should be href.

<a href="javascript:alert('!');" id="myHrefLink">My HREF Link</a> <script> document.getElementById("myHrefLink").click(); </script> 

Is there a good way around this in firefox? I can use jQuery if this opens up any possibilities.

• I am not going to assign an event handler by reference, I just need to click the link dynamically using javascript (without this manually using the mouse).

• I cannot change the functionality of the original link. He must remain as he is.

---

EDIT:

It seems that the problem with this code in Firefox is that the link does not have an onclick event and has the code referenced via href, or else NOT onclick (in the example here the code is in href, in my actual href code is installed only on "#", however the link somehow causes other actions when clicked, do not ask me how strange integration with flash with the plupload tool is).

 <a href="javascript:alert('This works!');">Click me dynamically</a> 

VS

 <a href="#" onclick="alert('This works!');">Click me dynamically</a> 

The second example is solid and works in all browsers when the click () function is launched, however I need the first of these two to work without changing the dynamic or any other connection. Any smart ideas?

Answer 1

The answer is that you cannot dynamically click on the href part of the link in firefox or chrome at this time.

 <a href="javascript:alert('This works!');">This does not work dynamically.</a> 

VS

 <a href="#" onclick="alert('This works!');">This works dynamically onclick.</a> 

It looks like FireFox is able to fire the click event on an HTML link when the onclick property is present. There are many workarounds for this, since the connection can be changed in some way (see Most of the comments in this post), but with respect to what I originally intended to do, which only works in IE at the moment.

http://jsfiddle.net/HVGre/1/ - Bad results are displayed here.

Answer 2

The behavior here depends on the exact version of Firefox:

• Firefox 4 and earlier do not have the click() method on anchors at all.
• Firefox 5 and 6 have such a method, and the method dispatches an untrusted click event, but they do not allow untrusted events to trigger the href link.
• Firefox 7 and later allows untrusted click events to trigger a link.

So, your options are waiting until the end of September, when Firefox 7 is sent, or if you need to support earlier versions so as not to use .click() to launch links. Getting .href links and then setting the appropriate window location on this line should work as a workaround.

Answer 3

Here is my other answer. This will dynamically delete what is in href, put "#" in href and add onclick = "with" alert ("Link was pressed").

Here is the code:

 <script type="text/javascript"> $(document).ready(function() { $('#myHrefLink').attr({ href: '#', onclick: 'alert("Link was clicked");return false;' }); }); function clickLinkDynamically() { $('#myHrefLink').trigger('click'); } </script> <a href="javascript:alert('!');" id="myHrefLink">My HREF Link</a> <br /><br /> <div style="padding:10px;border:2px solid grey;background-color:lightgrey;cursor:pointer;" onclick="clickLinkDynamically();">Click here to dynamically click on the link</div> 

You can see how it works here: http://jsfiddle.net/JVHEs/

Hope this helps.

Answer 4

This should work even in Firefox. Perhaps the problem is that you call .click before the DOM is ready. JQuery has a nice method for this:

 $(document).ready(function() { $("#myHrefLink").click(); }); 

In non-jQuery, your best bet is:

 window.onload = function () { document.getElementById("myHrefLink").click(); } 

This may not be a problem, but not sure what else could be ...

Answer 5

I think you will have to use jQuery since jQuery works for me:

 <script type="text/javascript"> function clickLinkDynamically() { $('#myHrefLink').click(); } </script> <a href="#" onclick="alert('Link was clicked');return false" id="myHrefLink">My HREF Link</a> <br /><br /> <div style="padding:10px;border:2px solid grey;background-color:lightgrey;cursor:pointer;" onclick="clickLinkDynamically();">Click here to dynamically click on the link</div> 

You can see an example in jsFiddle: http://jsfiddle.net/7vCmj/

Maybe it did not work because you did not have type="text/javascript" ?

Hope this helps.

Answer 6

try it

 $(document).ready(function(){ $('#myHrefLink').click(function(){ alert('!'); }); //To trigger click dynamically use $('#myHrefLink').trigger('click'); } 

Answer 7

Try this instead, first add the jQuery file link.

 <a href="javascript:void(0);" onclick="alert('!');" id="myHrefLink">My HREF Link</a> <script>$("#myHrefLink").trigger("click");</script> 

Answer 8

It works most of the time.

 function callClickEvent(element){ var evt = document.createEvent("HTMLEvents"); evt.initEvent("click", true, true); element.dispatchEvent(evt); } callClickEvent(document.getElementById("myElement")); 

EDIT:

and the other - I always lose

 function callClickEvent2(element){ var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); element.dispatchEvent(evt); } callClickEvent2(document.getElementById("myElement")); 

my pastebin for this: http://pastebin.com/VMHvjRaR

Answer 9

Here's another solution that takes all the links on the page and converts them to use the click event unnoticed. Essentially twist

 <a href="javascript:alert('This works!');">Click me dynamically</a> 

in

 <a href="#" onclick="alert('This works!');">Click me dynamically</a> 

Enjoy:

 $('a[href^="javascript:"][href!="javascript:;"]').each(function () { var oldHref = $(this).prop('href').substring(11); try { $(this).click(new Function('e', oldHref + ';e.preventDefault();')).prop('href', '#'); } catch (err) {} }); $('#myHrefLink').click(); 

Answer 10

Why don't you just do it? (If I'm missing something)

 $('#myHrefLink').click(function(){ alert('!'); }); 

Answer 11

It's not clear what you are trying to achieve here, but since you can use jQuery, try the following:

 <a href="" id="myHrefLink">blah blah</a> 

In TRIGGER click:

  $('#myHrefLink').trigger('click');