jQuery click事件未绑定到元素

Question

I am building a Chrome Extension for Instagram. My problem is occurring on the "single post" page of instagram (when you click on a post and it is shown as a modal).

When the post modal is showing I append a custom modal/pop-up of my own to the page with this code:

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

My problem is that the click function is not working on the .popup-close span for some reason. I know that it has to do with the instagram post modal being open because I use this custom pop-up in other places/pages when there is no post modal open and it works great. But when the instagram post modal is open the .popup-close span does nothing when I click it.

Why is this happening?

I know that it has nothing to do with z-index because I have tested that. I feel like Instagram might be running some kind of jQuery in the background that is disrupting my click event from binding because even when I open both modals and then paste the click code straight into the console the .popup-close span still does nothing.

UPDATE: I have also tried event delegation for the .popup-close span and that does not work.

UPDATE: I have also tried to bind to the .popup-close span with vanilla javascript and that does not work. It seems like nothing can bind to this element when the instagram post modal is up.

Answer 1

You can use $('body').on('click', eventHandlerFunction);

Documentation here .

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

Basically $("body") will capture click and check if target element is matching ".popup-close".