CODEWITHSUNDEEP
javascriptjquery
supersize
supersize

Reputation: 14773

two click handler on same element conflict

I have an element #div_1 which has inside the same document (not extern file) a plain JS function:

var trigger = false;
var div_1 = document.getElementById('div_1')
div_1.onclick = function() { trigger = true; };

and in an extern JS file I have a jQuery button click on the same element:

$(document).ready(function() {
 $('#div_1').click(function() {
   // some actions here
 });
});

The problem is that it does ignore the jQuery clickhandler completely. Is there no way to have two seperate click handler which work both?

Upvotes: 0

Views: 1398

Answers (1)

jfriend00
jfriend00

Reputation: 707158

There must be something else going on in your code because you can certainly have multiple event handlers on an object.

You can only have one handler assigned via onclick, but that should, in no way, interfere with the jQuery event handler. Please show us a reproducible demo in a jsFiddle because there is likely some other problem with your code causing this.

FYI, I'd strong suggest you not use the onclick attribute for event handlers because there is danger of one event handler overwriting another, something that does not happen when using .addEventListener() or jQuery's .click(). But, neither .addEventListener() or jQuery's .click() will overwrite the onlick.

Here's a working demo that shows both event handlers working just fine: http://jsfiddle.net/jfriend00/4Ge52/

Upvotes: 1

Related Questions