Div onclick event not called in Mozilla

Answer 1

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

Answer 2

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

Answer 3

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/

Answer 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.org/TR/html4/types.html

Answer 5

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

Answer 6

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>