why event listener disappears after the second click?

Question

The main thing happening when At the first time i click, everyting works fine, but at the second click nothing happents because eventlistener is now not exist, how do i fix this?

const html = (config) => {
        return `<div class="preferenceFilter-questions">
        <div class="preferenceFilter-questions-wrapper">
            <p></p>
        </div>
        <div class="preferenceFilter-questions-user">
            <img src="img/preferenceFilter-user.png" alt="">
        </div>
    </div>
    <div class="preferenceFilter-answers-main">
        <div class="preferenceFilter-answers swiper">
            <div class="preferenceFilter-answers-wrapper swiper-wrapper">
                ${config.answers.map((answer, i) => {
                    return `
                    <div class="preferenceFilter-answers-wrapper-item swiper-slide">
                        <img src="${answer.img}" alt="">
                        <b>${answer.title}</b>
                    </div>`;
                })}
            </div>
        </div>
    </div>`;

$('.preferenceFilter-answers-wrapper-item').on('click', () => {
                i++
                    if (i >= this.config.levels.length) {
                        return
                    }
                        $('.preferenceFilter-container').html(html(this.config.levels[i])) // appending new element to html
            })

I think some HTML or JQuery code is missing to help us better understand and be able to help you. — Juan, Jan 30 '23 at 14:21
When you overwrite the DOM fragment under that container, you also remove all event handlers registered on any elements that used to exist. — Pointy, Jan 30 '23 at 14:23
I added some code, but im sure it has nothing to do with my problem. — shiroSn, Jan 30 '23 at 14:25
Where is `preferenceFilter-container` relative to that code? — Pointy, Jan 30 '23 at 14:26
@Pointy is there anything to help me add this listener again or keep it in some way? — shiroSn, Jan 30 '23 at 14:26
Use jQuery event delegation instead of putting the handler directly on the items. — Pointy, Jan 30 '23 at 14:27
Right, and your event handler **overwrites** the contents with new elements. — Pointy, Jan 30 '23 at 14:28

why event listener disappears after the second click?

0 Answers0