我正在尝试使用 jQuery 工具覆盖,当有一组静态按钮启动覆盖时,它的效果非常好。
但是,当重新创建链接到叠加层的按钮时,叠加层似乎变得孤立,我不明白为什么。我无法关闭它,我什至无法通过使用 each() 遍历 DOM 来找到对它的引用。
我见过一些涉及触发点击的解决方案,但一方面这似乎是一个不雅的解决方案,另一方面它会导致覆盖在我尝试关闭之前闪烁。我想了解这不起作用的原因,以及一个好的解决方案,有人可以帮忙吗?
HTML
<div id="container">
</div>
<button class='modalLaunch' rel='#modal'>
Uncontained launch button
</button>
<div id="modal">
Modal
<button id="rebuildContainer">Rebuild container</button>
</div>
Javascript
$(document).ready(function() {
$("#modal").hide();
var rebuildContainer = function() {
$("#container").html("<button class='modalLaunch' rel='#modal'>Contained launch button 1</button><br><button class='modalLaunch' rel='#modal'>Contained launch button 2</button>");
var triggers = $(".modalLaunch").overlay({
mask: {
color: '#bbbbee',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: true,
load: false
});
}
$("#rebuildContainer").click(function() {
console.log("rebuilding buttons inside the container div");
$(".modalLaunch").each(function() {
var o = $(this).overlay();
if (o) {
console.log("there is an overlay associated with this button");
if (o.isOpened()) {
// I would expect this to be true once each time the handler is called
console.log("the overlay associated with this button is open");
}
}
});
$(".modalLaunch").overlay().close();
rebuildContainer();
});
rebuildContainer();
});
</p>
http://jsfiddle.net/EveryoneMustWin/hjJtc/
谢谢你的帮助!