[英]jQuery click event not binding to element
我正在为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帖子模式启动后,似乎没有任何东西可以绑定到此元素。
您可以使用$('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”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.