jQuery click事件未綁定到元素

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帖子模式的打開有關，因為當沒有帖子模式打開且效果很好時，我會在其他地方/頁面使用此自定義彈出窗口。 但是當instagram post modal打開時，當我單擊它時， .popup-close span .popup-close 。

為什么會這樣呢？

我知道與z-index無關，因為我已經測試過了。 我覺得Instagram可能會在后台運行某種jQuery，這會破壞我的click事件的綁定，因為即使我同時打開兩個模式，然后將click代碼直接粘貼到控制台中， .popup-close span仍然無濟於事。

更新：我還嘗試了.popup-close span事件委托， .popup-close不起作用。

更新：我也試圖用香草javascript綁定到.popup-close span ，並且不起作用。 instagram帖子模式啟動后，似乎沒有任何東西可以綁定到此元素。

Answer 1

您可以使用$('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-close”。