JavaScript事件未添加到DOM

Question

作為一項練習，我必須做一些在線自行車預訂應用程序。 該應用程序以標題開頭，說明如何使用該服務。 我希望本教程是可選的，所以我用HTML編寫了一條歡迎消息，如果用戶的cookie中沒有var表示不想再看該教程，則歡迎消息將被顯示為信息。

要實現這一點，需要獲取一個我需要構建滑塊的所有元素的JSON文件（三個div：左側是一個帶有箭頭圖像的區域，中間是一個進行解釋的位置，右側是另一個箭頭的位置）。 此外，我想在箭頭上放置“單擊”事件以顯示下一張或上一張幻燈片。 但是，當我這樣做時，只有右箭頭事件起作用。 我想到了一個關閉問題，因為它是最后添加到DOM中的元素，它可以保持事件發生，但是嘗試了很多事情卻沒有成功。 我還嘗試向div添加另一個可以工作的事件（“ keypress”），但只有單擊似乎有效。 您能否看一下我的代碼，以提示我發生了什么事？

這是我的控制器的初始化函數：

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
        });
    };
},

我希望對我的問題足夠清楚。 謝謝。

Answer 1

好的，我發現了問題，即使元素是實際創建的，它也以某種方式停留在虛擬DOM中一段時間​​，當“ addEvent”中的“ getElementById”在真實DOM中尋找它時，卻找不到目標並且無法添加事件。 最后一個元素沒有發生此問題，因為虛擬DOM中沒有其他緩沖。

最后，我從forEach循環中刪除了添加事件的函數，並在DOM更新以添加事件后創建了另一個函數。