为什么任何事件在动态加载的代码中都不起作用？

Question

I load an HTML page inside a modal

When I put the code out of the modal, the event works ( click, input, and others )

NOTE: I don't use and I don't want to use JQuery ( never )

Demo: https://codepen.io/jonathan_silva/pen/vYKqrvE?editors=0010

I've been trying to make it work for 3 days. It looks like everything is fine but...

Help me

const codeHTML = () => {
    const code = `
        <div id="page">
            <div class="steps">
                <article class="step1">
                    <div class="options-grid">
                        <div class="select-box">
                            <div class="options business-options">
                                <div class="business-option">
                                    <input type="radio" class="radio" />
                                    <label>Business A</label>
                                </div>

                                <div class="business-option">
                                    <input type="radio" class="radio" />
                                    <label>Business B</label>
                                </div>

                                <div class="business-option">
                                    <input type="radio" class="radio" />
                                    <label>Business C</label>
                                </div>
                            </div>

                            <div class="select-business">Select Business</div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    `;

    return code;
}

/* MODAL */
const modal = async ({ target }) => {  
    const html = codeHTML(); // Load HTML page

    let section = document.getElementById('modal-page');

    if (!section) {
        return;
    }

    document.getElementById('modal-content').insertAdjacentHTML('afterbegin', html);

    section.classList.add('modal');

    const onSectionClick = ({ target }) => {
        if (!target.classList.contains('modal-close')) {
            return;
        }

        section.classList.remove('modal');

        section.removeEventListener('click', onSectionClick);

        document.querySelector('#page').remove();
    }

    section.addEventListener('click', onSectionClick);
}

const openModal = document.querySelector('.announce a');
openModal.addEventListener('click', event => modal(event));

/* SELECT */
const selectBusiness = document.querySelector('.select-business');
const businessContainer = document.querySelector('.business-options');
const optionsBusiness = document.querySelectorAll('.business-option');

if (selectBusiness !== null) {
  selectBusiness.addEventListener('click', e => {
    console.log(e); // Nothing happens
    businessContainer.classList.toggle("active");
  });
}

Answer 1

The elements you're trying to querySelector aren't there when you call querySelector , since you only add them to the DOM within the modal() function. (You can do eg console.log(selectBusiness) to see that with your own eyes.)

You'll need to move that event binding in there, after the insertAdjacentHTML call.