addEventListener('click) 在单击按钮时未触发

Question

目标：单击按钮会在新页面中打开一个链接。
问题：单击按钮时未触发 eventListener

setTimeout 用于在加载 DOM 后加载内容。 DOMContentLoaded 不适用于 Odoo（我正在为其编写此脚本的 CRM）。 按钮元素：

<button type="button" class="btn oe_stat_button o_field_widget o_readonly_modifier"></button>

事件监听器：

const mainButton = document.querySelector('.btn.oe_stat_button.o_field_widget.o_readonly_modifier');
mainButton.addEventListener('click', () => window.open(linkConfig,'_blank'));

我已验证我的按钮已正确分配给 mainButton 并在 DOM 中找到。
我已经验证分配给容器的值是在 DOM 中找到的。

 if (window.location.href.includes('&menu_id=307')) { setTimeout(linkToSupplier, 3000); } function linkToSupplier() { const container = document.querySelector('[data-id^="product.supplierinfo_"]').innerText; const supplierContent = document.querySelector('[title="Supplier"]'); function linkConfig(supplierLink) { supplierContent.innerText = ''; const link = document.createElement("a") // Create txt const txt = document.createTextNode("Vist Website ") //append txt to anchor element link.appendChild(txt) // set the innerText link.title = "Visit Website "; link.target = 'target="_blank"'; // set the href property link.href = supplierLink; // get text to add link to const mainButton = document.querySelector('.btn.oe_stat_button.o_field_widget.o_readonly_modifier'); mainButton.outerHTML = `<button type="button" class="btn oe_stat_button o_field_widget o_readonly_modifier"></button>`; mainButton.addEventListener('click', () => window.open(supplierLink, '_blank')); const purchase = supplierContent; purchase.prepend(link); } window.addEventListener('hashchange', () => setTimeout(linkToSupplier, 1000)); if (container.includes('All Care')) { linkConfig('https://www.all-care.eu/'); } }

 <button type="button" class="btn oe_stat_button o_field_widget o_readonly_modifier" name="is_published" aria-label="Unpublished" title="Unpublished"> <i class="fa fa-fw o_button_icon fa-globe text-danger"></i> <div class="o_stat_info"> <span class="o_stat_text">Go to<br>Website</span> </div> </button>

Answer 1

如果您获得了对 DOM 元素的引用，但随后替换了它的outerHTML ，则您不再拥有对 DOM 元素的引用，它完全是一个新元素。

你会期望下面的工作。 它没有，就像你的代码一样。

 const mainButton = document.querySelector('.btn'); mainButton.outerHTML = `<button type="button" class="btn">foo</button>`; mainButton.addEventListener('click', () => console.log("Clicked"));

 <div class="btn">MyButton</div>

您需要做的是获得对新元素的新引用。

 const mainButton = document.querySelector('.btn'); mainButton.outerHTML = `<button type="button" class="btn">foo</button>`; const newButton = document.querySelector('.btn'); newButton.addEventListener('click', () => console.log("Clicked"));

 <div class="btn">MyButton</div>