Why doesn't any event work in dynamically loaded code?

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");
  });
}

AKX · Accepted Answer · 2021-02-14 22:24:45Z

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 e.g. console.log(selectBusiness) to see that with your own eyes.)

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

answered Feb 14, 2021 at 22:24

AKX

171k16 gold badges147 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why doesn't any event work in dynamically loaded code?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related