jQuery单击事件未绑定到元素

Question

我正在为Instagram构建Chrome扩展程序。我的问题出现在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上运行。我知道它与instagram post模式打开有关，因为我在其他地方/页面使用这个自定义弹出窗口，当没有后期模态打开并且它工作得很好。但是当Instagram post modal打开时，.popup-close span在点击它时什么都不做。

为什么会这样？

我知道它与z-index无关，因为我已经测试过了。我觉得Instagram可能会在后台运行某种jQuery，这会破坏我的click事件的绑定，因为即使我打开两个模态然后将click代码直接粘贴到控制台中，.popup-close span仍然无能为力。

更新：我也尝试过.popup-close span的事件授权，但这不起作用。

更新：我也尝试用香草javascript绑定到.popup-close span，这是行不通的。当instagram post模式启动时，似乎没有任何东西可以绑定到这个元素。

Answer 1

你可以使用$('body').on('click', eventHandlerFunction);

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

基本上$("body")将捕获点击并检查目标元素是否匹配“.popup-close”。