0

I have a set of checkboxes in an HTML file. Then I have onClick() event handlers in two separate JavaScript files. I just noticed that only one of of my onClick methods is being called when I click on the checkboxes. If I remove one of the event handlers then then other one will work. There must be some way to get a click event and not swallow the event for other listeners.

How do I allow both of the event handlers to be called?

        var at = document.getElementById("at");
        at.onclick = function() {
ad absurdum
  • 19,498
  • 5
  • 37
  • 60
user3470688
  • 539
  • 6
  • 21
  • that is because your first callback is being replaced by the last one. you should see @chiliNUT 's answer, and also you should probably also see this http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick –  Jan 09 '17 at 07:54

1 Answers1

0

Assigning to onclick will overwrite whatever was there before. If you want to stack events, Use addEventListener in native JS or jQuery .on("click"

JS

var at = document.getElementById("at");
at.addEventListener("click", function() { //whatever
                                        }, false);
at.addEventListener("click", function() { //some other function
                                        }, false);

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

jQuery

$('#at').on("click", function() {//whatever
                                })
        .on("click", function() {//some other function
                                });

http://api.jquery.com/on/

chiliNUT
  • 18,989
  • 14
  • 66
  • 106
  • 1
    Indeed. Also, if you want to stop event execution from some onclick event, you can call `event.stopPropagation()` [https://api.jquery.com/event.stoppropagation/](https://api.jquery.com/event.stoppropagation/) – Valijon Jan 09 '17 at 01:00