Div Onclick Event Not Called In Mozilla

Question

I have this in my code:

Title

Other title<

Solution 1:

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

Solution 2:

Try passing a reference to the element to the function.

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

and

Baca Juga

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

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

Solution 3:

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

Solution 4:

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

Solution 5:

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

<divclass="someClass"><divid="22"class="otherClass">Title</div><divclass="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

JavaScript Free