Div onclick event not called in Mozilla

Question

I have this in my code:

<div class="someClass">
    <div id="22" class="otherClass" onclick="goToEdit();">Title</div>
    <div class="parent">Other title</div>
</div>

And:

function goToEdit()
{
    tree.selectItem($(event.target).attr('id'));
    btnMyButton_onclick();
}

In Chrome everything works fine, but in Mozilla it doesn't react to the click event. Why?

How do you know that the event was not fired in Firefox (Mozilla)? Try putting an alert() in the function goToEdit() — Sparky, Apr 18 '12 at 12:04
What is `tree`? Does it refer to `window.tree` which in turn refers to an element with ID `tree`? If yes, Firefox does not create symbols in global scope for elements with IDs. You'd have to use `document.getElementById`. — Felix Kling, Apr 18 '12 at 12:07
@Sparky: Or better yet, using a proper debugger (Firefox has one built in now, or of course there's Firebug) and a breakpoint. — T.J. Crowder, Apr 18 '12 at 12:08
@FelixKling No, it is dhtmlx tree. I get error that event is not defined. — user1322207, Apr 18 '12 at 12:21
Ah yeah... in Firefox, the event object is passed as first argument to the event handler. You'd have to do `onclick="goToEdit(event);"` and `function goToEdit(event)`. That's like the 101 in event handling ;) To learn more about it, have a look at http://www.quirksmode.org/js/introevents.html — Felix Kling, Apr 18 '12 at 12:22

T.J. Crowder · Accepted Answer · 2012-04-18T12:31:34.610

I get error that event is not defined

Doh! We should all have realized.

The thing is that event is not a global on most browsers, though it is on IE and Chrome throws a bone to sites designed for IE by making it global as well as doing what it should do (passing it into the event handler function).

Your best bet by far is to not use onclick="code" at all (see below), but you can also do this:

<div id="22" class="otherClass" onclick="goToEdit(event);">Title</div>

...which should work cross-browser. It works because the event object is defined in the special context in which onclick handlers are called (on browsers that do this in a standard way), or it's a global (on IE), and so either way it's defined at that point (but not necessarily, as a global, later in your goToEdit function — which is why we pass it in as an argument).

But again, I wouldn't do that. Instead, I'd make the id value valid for CSS by having it start with a letter, and use jQuery to hook up the handler:

HTML:

<div id="d22" class="otherClass">Title</div>

JavaScript:

$("#d22").click(goToEdit);
function goToEdit(event) {
    tree.selectItem(event.target.id.substring(1));
    btnMyButton_onclick();
}

Notes:

I striped the d off the beginning of the id value before passing it on. I assume it was 22 for a reason.
There's no reason to do $(event.target).attr('id'), just use event.target.id directly.
If the div may contain other elements (spans, ems, ps, etc.), note that event.target may not be the div, it may be a descendant element of the div. this will always be the div, though (jQuery sees to that), so:
```
$("#d22").click(goToEdit);
function goToEdit(event) {
    tree.selectItem(this.id.substring(1));
    btnMyButton_onclick();
}
```

score 1 · Answer 2 · answered Apr 18 '12 at 12:13

1

Try passing a reference to the element to the function.

 ... onclick="goToEdit(this);">

and

function goToEdit(element)
    {
       tree.selectItem($(element).attr('id'));
       btnMyButton_onclick();
    }

edit: http://jsfiddle.net/SwUuE/4/

answered Apr 18 '12 at 12:13

Rick

1,563
9
11

Thanks Rick it Helped me ! – MD Shahrouq Jul 07 '17 at 07:27

score 0 · Answer 3 · answered Apr 18 '12 at 12:05

0

HTML name and id tokens must begin with a letter. You have id="22". Maybe it causes inconsistency between browsers. See: http://www.w3.org/TR/html4/types.html

answered Apr 18 '12 at 12:05

ZZ-bb

2,157
1
24
33

Yes and no. :-) As of HTML5, that ID is [fine *for HTML and the DOM*](http://www.w3.org/TR/html5/elements.html#the-id-attribute), and here the spec is just documenting existing behavior (browsers have no problem with `document.getElementById("22")`). CSS still requires that it [start with a letter](http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier). – T.J. Crowder Apr 18 '12 at 12:22
...and I'm pleased to see that all the browsers I tried (Chrome, Firefox, Opera, IE9) correctly threw an error on `document.querySelector("#22")` in standards mode; Chrome and Firefox also throw an error in quirks mode, whereas Opera tolerated the invalid CSS `id` and IE9 reported that it didn't have `querySelector` at all. So it'll depend on what `tree.selectItem` does and whether it uses that `id` value in a DOM selection. Tests: [Standards](http://jsbin.com/acedug) | [Quirks](http://jsbin.com/acedug/2) – T.J. Crowder Apr 18 '12 at 12:23

score 0 · Answer 4 · answered Apr 18 '12 at 12:12

0

By definition div is used to divide your page into different sections. Use anchor or input with type button tag instead

answered Apr 18 '12 at 12:12

Satish N Ramteare

197
1
9

score 0 · Answer 5 · answered Aug 24 '16 at 10:05

I think, you can remove "onclick" from your html

<div class="someClass">
    <div id="22" class="otherClass">Title</div>
    <div class="parent">Other title</div>
</div>

And then try something like this

$('#22').on('click', function (e) {
    your code
});

But if your div id="22" will be added dynamically your should use something like this

$('parent').on('click', '#22', function (e) {
    your code
});

where 'parent' - static element already existed in document before click

score 0 · Answer 6 · answered Jul 07 '17 at 07:29

I too was facing same problem , but this code helped me.

I was testing on Mozilla Firefox and Chrome, it worked on both.

<input type="button" onclick="return goBack();" class="btn btn-warning cancel" value=" Cancel" style="color:white" />

<script>
function goBack() {
    window.history.back();
}
</script>

Div onclick event not called in Mozilla

6 Answers6

Linked