I'm adding a click event to all links that match a particular selector as part of a JS module I'm creating. It looks something like this.

var Lightbox = (function () {

  var showLightbox = function () {
    // this does stuff
  };

  var init = function () {
    var links = document.querySelectorAll(options.selector);
    for(var i = 0; i < links.length; i++) {
      links[i].addEventListener('click', function() {
        showLightbox();
      }, false);
    }  
  };

  return {
    init: init
  };

})();

Lightbox.init();

On first load the any links on the page that match the selector work. There is also a closeLightbox() method that works fine. However when clicking the links for a second time nothing happens. I get no console errors – nothing.

Is there something I'm doing wrong when adding the event listener?

EDIT: I've updated the code to remove some redundant methods and have pasted the full code here:

I'm adding a click event to all links that match a particular selector as part of a JS module I'm creating. It looks something like this.

var Lightbox = (function () {

  var showLightbox = function () {
    // this does stuff
  };

  var init = function () {
    var links = document.querySelectorAll(options.selector);
    for(var i = 0; i < links.length; i++) {
      links[i].addEventListener('click', function() {
        showLightbox();
      }, false);
    }  
  };

  return {
    init: init
  };

})();

Lightbox.init();

On first load the any links on the page that match the selector work. There is also a closeLightbox() method that works fine. However when clicking the links for a second time nothing happens. I get no console errors – nothing.

Is there something I'm doing wrong when adding the event listener?

EDIT: I've updated the code to remove some redundant methods and have pasted the full code here: http://pastebin./mC8pSAV2

• javascript
• dom-events

Share Improve this question Follow edited Apr 19, 2023 at 9:09 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 26, 2015 at 12:24 OliverOliver 7711 silver badge88 bronze badges 5

• 1 With the code you've supplied, there is no way to tell if anything happens when you click on one of the links. The event listener might first. It imght call showLightbox(). Some of the unspecified "stuff" that function might be done (with no visible effect). You need to supply a test case that actually demonstrates the problem (and adding some extra console.log statements to trace what happens wouldn't be a bad idea). – Quentin Commented Feb 26, 2015 at 12:28
• E.g., the code you've shown won't do what you describe, you've over-trimmed it. – T.J. Crowder Commented Feb 26, 2015 at 12:31
• 1 Side note: Unless you need to prevent showLightBox from receiving the event argument and being called with this referring to the link, links[i].addEventListener('click', function() { showLightbox(); }, false); is a long way to write links[i].addEventListener('click', showLightbox, false);. – T.J. Crowder Commented Feb 26, 2015 at 12:32
• @Quentin Sorry, full code here: pastebin./4dK5ZszW – the reference to Helpers just contains a few helper methods for grabbing file contents etc. I am just getting my head around JS and the idea of writing modular code – so please forgive the inaccuracies in best practice. – Oliver Commented Feb 26, 2015 at 13:25
• I've updated the pastebin code to remove some of the redundant methods to hopefully make things a little simpler: pastebin./mC8pSAV2 – Oliver Commented Feb 26, 2015 at 13:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You are reassigning innerHTML of the whole document:

document.body.innerHTML += response;

on the link click. That wipes out all existing DOM elements with their events and creates new DOM structure with no clicks assigned.