jQuery单击事件未绑定到元素

问题描述 投票:0回答:1

我正在为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模式启动时,似乎没有任何东西可以绑定到这个元素。

javascript jquery google-chrome-extension modal-dialog
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.