Javascript addEventListener仅触发一次
作为我创建的JS模块的一部分,我将向与特定选择器匹配的所有链接添加一个单击事件。看起来像这样Javascript addEventListener仅触发一次,javascript,javascript-events,Javascript,Javascript Events,作为我创建的JS模块的一部分,我将向与特定选择器匹配的所有链接添加一个单击事件。看起来像这样 var Lightbox = (function () { var showLightbox = function () { // this does stuff }; var init = function () { var links = document.querySelectorAll(options.selector); for(var i = 0; i
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();
var Lightbox=(函数(){
var showLightbox=函数(){
//这很有用
};
var init=函数(){
var links=document.querySelectorAll(options.selector);
对于(变量i=0;i
首先加载页面上与选择器工作匹配的任何链接。还有一个closeLightbox()
方法可以很好地工作。但是,当第二次单击链接时,什么也没有发生。我没有收到任何控制台错误–nuffin
添加事件侦听器时是否有什么地方我做错了
编辑:我已更新代码以删除一些冗余方法,并已将完整代码粘贴到此处:您正在重新分配整个文档的
innerHTML
:
document.body.innerHTML += response;
在链接
上单击
。这将清除所有现有的DOM元素及其事件,并创建新的DOM结构,而不指定单击。根据您提供的代码,当您单击其中一个链接时,无法判断是否发生了任何事情。事件侦听器可能会首先启动。它直接调用showLightbox()
。一些未指明的“东西”功能可能完成(没有明显的效果)。您需要提供一个实际演示问题的测试用例(并且添加一些额外的console.log语句来跟踪发生的情况不是一个坏主意),您已对其进行了过度修剪。旁注:除非您需要防止showLightBox
接收事件参数并使用this
引用链接调用,links[i]。addEventListener('click',function(){showLightBox();},false)编写链接[i]有很长的路要走。addEventListener('click',showLightbox,false)代码>@Quentin抱歉,这里的完整代码:–对Helpers的引用只包含一些用于抓取文件内容的helper方法等。我只是想了解JS和编写模块化代码的想法–因此请原谅最佳实践中的错误。我更新了pastebin代码,删除了一些冗余方法,希望能让事情变得更简单一些更简单: