addEventListener('click) not triggering when button is clicked-CodePudding

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" ></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" ></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"  name="is_published" aria-label="Unpublished" title="Unpublished">
   <i ></i>
   <div >
      <span >Go to<br>Website</span>
   </div>
</button>

CodePudding user response：

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" >foo</button>`;
mainButton.addEventListener('click', () => console.log("Clicked"));

<div >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" >foo</button>`;
const newButton = document.querySelector('.btn');
newButton.addEventListener('click', () => console.log("Clicked"));

<div >MyButton</div>