Click() works in IE but not Firefox

Question

I have code which is trivial but only works in IE not Firefox.

$(document).ready(function(){
    $('li#first').click();
});

I have also tried:

document.getElementById('first').click();

But that doesn't work either.

Is this an IE bug/feature or is click() not supported in the other browsers?

Responding to comments:

There is a single element with ID first, no more.
It is an onclick on the list element that expands the element and moves focus on a Google Map element.
Running the code in patrick's response (adding another click event to the element) produced some interesting behaviour. When running $('li#first').click() only the new event fired, but physically clicking the element with the mouse fired both (new and original).

Thanks in advance.

What does the HTML look like? How many elements on the page have the id "first"? — Pointy, May 11 '10 at 16:19

score 11 · Accepted Answer · answered May 12 '10 at 09:26

11

Firefox does not support click().

Running document.getElementById('first').click() returns the following error click is not a function

So I added a snippet of code to add click() functionality to every element. This code was found after a painful series of google searches resulting in this thread.

The snippet is below and needs to be included just once on the page:

HTMLElement.prototype.click = function() {
   var evt = this.ownerDocument.createEvent('MouseEvents');
   evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
   this.dispatchEvent(evt);
}

answered May 12 '10 at 09:26

tgandrews

12,349
15
43
55

jQuery's version of `click()` should have worked in Firefox. So this answer solves the problem you were having? – user113716 May 12 '10 at 23:44
@patrick: Yeah it does. jQuery `click()` only worked when the event was added with jQuery. – tgandrews May 13 '10 at 08:29
Strange. I can fire a handler set up by an inline "onClick" in Firefox if I use jQuery's `.click()` function (jQuery 1.4.2). Glad you got it working, though. – user113716 May 13 '10 at 11:37
I will edit the question to include the original code tomorrow. – tgandrews May 13 '10 at 19:33
I tested ur code in Firefox 3.0.19 but not in Firefox 16. Any solution for Firefox 16? – huahsin68 Nov 03 '12 at 09:15

score 1 · Answer 2 · answered Mar 30 '11 at 08:31

Your code should work in Firefox. Here's a full snippet that proves it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
--></style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript"><!--
jQuery(function($){
    $(document).ready(function(){
        $('li#first')
            .click(function(){
                alert("I've been clicked: " + $(this).text());
            })
            .click();
    });
});
//--></script>
</head>
<body>

<ul>
    <li id="first">First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

</body>
</html>

You are right. Click works, but it was a bug caused by the situation - not click directly. — tgandrews, Mar 30 '11 at 20:58

score 1 · Answer 3 · answered Mar 07 '12 at 11:39

try this html

<a id="link" href="url">click here</a>

js

$(document).ready(function(){
    $("#link").click(function(){
        window.location.href = $(this).attr('href');
    });
});

also if this is somethng you don't want to do theb also try something like this:

$(document).ready(function(){
        $("#link")[0].click();
    });

score 0 · Answer 4 · answered Oct 10 '12 at 15:28

Firefox does support the .click() JQuery function. I had the same problem, until I specified the tag name in my selector. Essentially, I had something like this:

<a id="vidLeftArrow" blah blah blah>...</a>
$("#vidLeftArrow").click(function () {
   //Do something
});

Which didn't work. I had to change the javascript to this:

<a id="vidLeftArrow" blah blah blah>...</a>
$("a#vidLeftArrow").click(function () {
   //Do something
});

score 0 · Answer 5 · answered May 11 '10 at 16:25

0

Are you trying to go to the first link? You can't trigger a link's default action via a click.

But here's a workaround:

var link = jQuery("#first>a", this)
if(!link.onclick) window.open(link.href, link.target || "_self")
else jQuery(link).click()

Source: http://forum.jquery.com/topic/jquery-a-0-click-not-working

answered May 11 '10 at 16:25

Xavi Esteve

1,114
2
19
35

It is an onclick on the list element that expands the element and moves focus on a Google Map element. – tgandrews May 11 '10 at 18:53

Click() works in IE but not Firefox

5 Answers5

Linked