Событие щелчка jQuery не привязано к элементу - PullRequest
Новая
       8

Событие щелчка jQuery не привязано к элементу

0 голосов
/ 18 сентября 2018

Я создаю расширение Chrome для Instagram.Моя проблема возникает на странице «одного поста» в Instagram (когда вы нажимаете на пост, и он отображается как модальный).

Когда пост-модальный показывает, я добавляю пользовательские модальные / всплывающие окнамоей собственной странице с этим кодом: 

function attachUpgradePopup(str) {
    $(".upgrade-popup-container").remove();
    $("body").append(`
        <div class="upgrade-popup-container">
            <div class="upgrade-popup">
                <img class="popup-img" src="https://i.imgur.com/6sOdwYs.png">
                <p class="upgrade-popup-text">This post is ${str}.</p><br>
                <p class="upgrade-popup-text">To do this you must upgrade to</p>
                <p class="upgrade-popup-text">the PRO version!</p>
                <span class="popup-close">X</span>
            </div>
        </div>
    `);
    $(".popup-close").click(function() {
        console.log('closing')
        $(".upgrade-popup-container").remove();
    });
}

Моя проблема в том, что функция click не работает на .popup-close span по некоторым причинам.Я знаю, что это связано с тем, что открыт модальный пост-инстаграм, потому что я использую это пользовательское всплывающее окно в других местах / страницах, когда нет пост-модального поста, и он прекрасно работает.Но когда открыт постмодальный инстаграм, .popup-close span ничего не делает, когда я нажимаю на него.

Почему это происходит?

Я знаю, что это не имеет ничего общего с z-index потому что я проверял это.Я чувствую, что Instagram может запускать какой-то jQuery в фоновом режиме, который мешает моему click событию связываться, потому что даже когда я открываю оба модала и затем вставляю код click прямо в консоль, .popup-close spanвсе еще ничего не делает.

ОБНОВЛЕНИЕ: Я также пытался делегировать события для .popup-close span, и это не работает.

ОБНОВЛЕНИЕ: Я также пытался привязать к .popup-close span с ванильным JavaScript, и это не работает.Кажется, что ничто не может связать с этим элементом, когда инстаграм пост пост модал.

1 Ответ

0 голосов
/ 18 сентября 2018

Вы можете использовать $('body').on('click', eventHandlerFunction);

Документация здесь . 

function attachUpgradePopup(str) {
    $(".upgrade-popup-container").remove();
    $("body").append(`
        <div class="upgrade-popup-container">
            <div class="upgrade-popup">
                <img class="popup-img" src="https://i.imgur.com/6sOdwYs.png">
                <p class="upgrade-popup-text">This post is ${str}.</p><br>
                <p class="upgrade-popup-text">To do this you must upgrade to</p>
                <p class="upgrade-popup-text">the PRO version!</p>
                <span class="popup-close">X</span>
            </div>
        </div>
        `);
    $("body").on("click", ".popup-close", function () {
        console.log('closing')
        $(".upgrade-popup-container").remove();
    });
}

В основном $("body") захватит щелчок и проверит, соответствует ли целевой элемент ".popup-близкий».

...