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?

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?

• javascript
• jquery

• 1 How do you know that the event was not fired in Firefox (Mozilla)? Try putting an alert() in the function goToEdit() – Sparky Commented Apr 18, 2012 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 Commented Apr 18, 2012 at 12:07
• 1 @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 Commented Apr 18, 2012 at 12:08
• @FelixKling No, it is dhtmlx tree. I get error that event is not defined. – user1322207 Commented Apr 18, 2012 at 12:21
• @T.J.Crowder I get error that event is not defined. – user1322207 Commented Apr 18, 2012 at 12:22

6 Answers 6

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

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/SwUuE/4/

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

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

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

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>