Listening for onclick event issue

Question

Hi, I'm facing an issue with listening for onclick event of newly created element. In short, I'm trying to create a new section element every time I click on its button so it creates a new section sibling.

Firstly, I initialize default section:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Creating elements</title>
</head>
<body>
<div id="wrapper"></div>
<script src="wrapper.js"></script>
</body>
</html>

// wrapper.js
import {Section} from "./section.js"

class Wrapper extends Section {
    constructor() {
        super();
        this.wrapper = document.getElementById("wrapper")
    }

    initialize() {
        this.wrapper.appendChild(this.addSection())
    }
}
const wrapper = new Wrapper();
wrapper.initialize()

// section.js
import {Container} from "./container.js"

export class Section extends Container {
    constructor() {
        super();
    }

    addSection() {
        const newSection = document.createElement("section")
        newSection.appendChild(this.addContainer())
        newSection.innerHTML += this.addSectionButton()
        newSection.querySelector(`.btn-new-section`).addEventListener("click", (e) => {
            this.addSection()
        })
        return this.wrapper.appendChild(newSection)
    }

    addSectionButton() {
        return `<button type="button" class="btn-new-section">New section</button>`;
    }
}

So far, it works fine. But part of each section element is creation of another element "div.container" and this element has its own listener that does not work on click so it does not create container siblings within the section.

// container.js
export class Container {
    addContainer() {
        let newContainer = document.createElement("div")
        newContainer.classList.add(`container`)
        newContainer.innerHTML += this.addContainerButton()
        newContainer.querySelector(`.btn-new-container`).addEventListener("click", (e) => {
            this.addContainer()
        })
        return newContainer
    }

    addContainerButton() {
        return `<button type="button" class="btn-new-container">New container</button>`;
    }
}

Any help how handle this issue? Thank you.

Welcome to the Treehouse Community

Looking to learn something new?

Gemini Brain

Gemini Brain

Listening for onclick event issue