addEventListener('click) not triggering when button is clicked

Question

Goal: Clicking on the button opens a link in a new page.
Issue: eventListener not triggering when button is clicked

setTimeout is used to load content after DOM is loaded. DOMContentLoaded does not work with Odoo (the CRM I am writing this script for). Button element:

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

Event listener:

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

I have verified that my button is well assigned to the mainButton and found in the DOM.
I have verified that the value assigned to container is found in the 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

If you get a reference to a DOM element, but then replace its outerHTML , you no longer have a reference to the DOM element, it is a new element entirely.

You'd expect the below to work. It doesn't, just like your code.

 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>

What you need to do is get a new reference to the new element.

 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>