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!
Since asking this, I've read this question jQuery Tools Alternatives? and decided that it's probably best to abandon jQuery Tools. The forums on their site don't even let you start a new thread!