未添加到DOM的JavaScript事件

作为练习，我必须做一个小小的在线自行车预订应用程序。此应用程序以说明如何使用该服务的标题开头。我希望本教程是可选的，因此我用HTML编写了一条欢迎消息，如果用户的Cookie中没有表示他不想再次查看教程的var，则欢迎消息将替换为显示信息的滑块

要实现这一点，需要获取一个JSON文件，其中包含构建滑块所需的所有元素（三个分区：左侧分区中有一个箭头图像，中间分区中有解释，右侧分区中有另一个箭头）。此外，我想把“点击”事件放在箭头上，以显示下一张或上一张幻灯片。但是，当我这样做时，只有向右箭头事件起作用。我想到了一个闭包问题，因为它是最后一个添加到DOM中的元素，它保留了事件，但尝试了很多事情都没有成功。我还尝试向div添加另一个有效的事件（“keypress”），但似乎只有单击有效。你能看看我的代码给我一个提示吗

以下是我的控制器的init函数：

init: function() {
    var load = this.getCookie();
    if(load[0] === ""){
        viewHeader.clearCode();
        var diapoData = ServiceModule.loadDiapoData("http://localhost/javascript-web-srv/data/diaporama.json");
        diapoData.then(
            (data) => {
                // JSON conversion
                modelDiapo.init(data);           
                // translation into html
                controller.initElementHeader(modelDiapo.diapoElt[0]);
                controller.hideTuto();
            }, (error) => {
                console.log('Promise rejected.');
                console.log(error);
            });
    } else {
        viewHeader.hideButton();
        controller.relaunchTuto();
    }
}

我的函数将JSON元素转换为HTML，并在需要时添加事件，请仔细查看：

initElementHeader: function(data){
    data.forEach(element => {
        // Creation of the new html element
        let newElement = new modelHeader(element);
        // render the DOM
        viewHeader.init(newElement);
    });
}

NewElement是一个创建插入HTML所需全部内容的类，viewHeader.init（）使用这些元素更新DOM，并在需要时向其中添加事件

init: function(objetElt){
    // call the render
    this.render(objetElt.parentElt, objetElt.element);
    // add events
    this.addEvent(objetElt);
},

最后，addEvent函数：

addEvent: function(objet){
    if(objet.id === "image_fleche_gauche"){
        let domEventElt = document.getElementById(objet.id);
        domEventElt.addEventListener("click", function(){
            // do things
        });
    }
    else if(objet.id === "image_fleche_droite"){
        let domEventElt = document.getElementById(objet.id);
        domEventElt.addEventListener("click", function(){
            // do stuff
        });
    };
},

---

我希望对我的问题有足够的了解。多谢各位

好的，我发现了问题，即使元素是实际创建的，它也在虚拟DOM中停留了一段时间，当“addEvent”中的“getElementById”在真实DOM中查找它时，它没有找到目标，也无法添加事件。最后一个元素没有出现此问题，因为虚拟DOM中没有其他缓冲

---

最后，我从forEach循环中取出了添加事件的函数，并在更新DOM以添加我的事件之后创建了另一个函数。

看起来您在

addEvent

中包含的两个事件是相同的。您是否已浏览或记录过日志，以确保您在

if else

中的正确位置？您确定错误不在您有

//do stuff

的事件中吗？控制台中有任何错误吗？我确保我使用了一些控制台日志消息，并且控制台没有显示任何错误。它们确实是相同的，只是函数内部所做的更改（也许我可以通过只添加一个事件并更改被调用函数来简化代码）。