I am trying to use the jQuery tools overlay, and it works very nicely when there is a static set of buttons that launch the overlay.
However, when the buttons that are linking to the overlay are recreated, the overlay seems to get orphaned and I can't see why. I can't close it, and I can't even find a reference to it by going through the DOM with each().
I've seen some solutions which involve triggering a click, but for one thing this seems like an inelegant solution, and for another it causes the overlay to flicker before closing when I try it. I'd like to understand the reason why this doesn't work, as well as a good solution, can anyone help?
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();
});
http://jsfiddle.net/EveryoneMustWin/hjJtc/
Thanks for your help!
