How can I click an href link dynamically in firefox? 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 be able to click dynamically. This works fine with the .click() function in IE, but fails in firefox. I cannot change the link to a button, so that is not an option, it has to be an href.

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

<script>
   document.getElementById("myHrefLink").click();
</script>

Is there a good workaround for this in firefox? I'm able to use jQuery if that opens any possibilities.

1. I do not intend to assign an event handler to the link, I simply need to click the link dynamically using javascript (without doing so manually with the mouse).

2. I cannot alter the functionality of the original link. It has to remain as it is.

---

EDIT:

It seems that the issue Firefox has with this code is that the link does not have an onclick event and has the code referenced via the href, or otherwise NOT onclick (in the example here the code is on href, in my actual code the href is set to just '#', however the link somehow triggers other actions when clicked, don't ask me how, it's a weird flash integration with the plupload tool).

<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 triggered, however I need the first of these two to work without changing the link dynamically or otherwise. Any clever ideas?

Answer 1

The behavior here depends on the exact Firefox version:

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

So your options are to wait until late September when Firefox 7 ships, or if you need to support earlier versions to not use .click() to trigger links. Getting the .href of the link and then setting the relevant window's location to that string should work as a workaround.

Answer 2

Here is my other answer. This will dynamically remove what is in the href, put "#" in the href, and add an onclick="" with "alert('Link was clicked')" in it.

Here's 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 it working here: http://jsfiddle.net/JVHEs/

I hope this helps.

Answer 3

The answer is that you cannot dynamically click on the href portion of a 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 seems that FireFox is only able to fire a click event on an HTML link when an onclick property is present. There are tons of workarounds for this so long as the link can be altered in some way (see most comments in this post), but as far as doing what I originally intended to, that only works in IE, currently.

http://jsfiddle.net/HVGre/1/ - see failed results here.

Answer 4

This should work, even in Firefox. Perhaps the issue is you are calling the .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 the issue, but not sure what else it could be...

Answer 5

This 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 here's the other one I always loose

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 6

I think you're going to have to use jQuery, as jQuery is working 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 wasn't working because you didn't have type="text/javascript" in?

I hope this helps.

Answer 7

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

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

into

<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 8

Try this

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


   //To trigger click dynamically use
   $('#myHrefLink').trigger('click');
}

Answer 9

Try this instead, add reference to jQuery file first.

<a href="javascript:void(0);" onclick="alert('!');" id="myHrefLink">My HREF Link</a>

<script>$("#myHrefLink").trigger("click");</script>

Answer 10

Why don't you just do this? (Unless I am missing something)

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

Answer 11

It's not clear what you are trying to achieve here, but as you can use jQuery, try this:

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

To TRIGGER a click:

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