將事件處理程序添加到.innerHTML中創建的元素ID中

Question

我正在構建一個Web應用程序，該應用程序根據輸入到表單的內容在隊列中創建元素。 這些元素的HTML是由“模板”生成的，其中包含幾個圖標，一旦我可以添加addEventHandler調用，這些圖標將用作按鈕，但由於我的一生，我無法使其正常工作。 我的事件處理程序應在DOM加載后調用，所以我不確定是什么問題。

這是我的（基本）代碼：

 // Init app let init = function() { // Set up user input handling submit.addEventListener('click', inputHandler); // TODO: Fix button contentInput.addEventListener('keypress', function(e) { if (e.keyCode == 13 && contentInput.value != '') { e.preventDefault(); inputHandler(); } }); let getFlag = document.getElementById('flag--LRI3LcUxQ9W5RfIWoc8'); getFlag.addEventListener('click', function() { console.log('IT WORKED'); }); } let renderQueryList = function() { // Determine which item to render (timestamp, number of views, flagged) const oneDay = 60 * 60 * 24 * 1000; const arrLength = queue.length; queueDisplay.innerHTML = ''; for (i = 0; i < arrLength; i++) { let element = queue[i]; let whenAdded = element.age; if (!element.hasOwnProperty('type')) { element.type = 'text'; } if ((now - whenAdded) > oneDay) { // console.log(element.text + ': this element is expired') return element.expired === true; } // TODO: check for type in templates, fallback to default type or display next item let singleElement = contentTypeTemplates[element.type](element); // for each item in list queueDisplay.appendChild(singleElement); } } // Set up templates let contentTypeTemplates = { text: function(contentItem, index) { let container = document.createElement('div'); container.className = 'queueItem'; container.setAttribute('id', contentItem.key); container.innerHTML = contentItem.text + '<div class="queueControls">' + '<i style="display: none;" class=" delete fas fa-times-circle" id="delete-' + contentItem.key + '"></i>' + '<i class="flag fas fa-flag" id="flag-' + contentItem.key + '"></i>' + '<i class="permanent fas fa-thumbtack" id="permanent-' + contentItem.key + '"></i>' + '</div>'; return container; }, image: function(contentItem) { } } document.addEventListener("DOMContentLoaded", function(event) { init(); }); 

Answer 1

完成container.innerHTML = 'html string'您可以使用

container.querySelector('.someIconClass').addEventListener(eventName, handler)