Disassociating Overlay with an element Created Nov 23, 2009

I think your understanding of how javascript works is a little off. You are not wasting memory or "polluting" anything by leaving elements binded to functions. The javascript does not run and therefore does not create the overlay until you initiate the function by clicking the link.

But what you are looking to do is unbind the element(s) from their expose call. Simply unbind the element using unbind() and it will no longer be a trigger for the overlay. When you want to rebind it, recall overlay() on that element.

Yep, my JS knowledge is without doubt incomplete (Java-think).

I tried unbind(), which worked great, but rebinding with overlay() didn't work.

	<a class="button button_special" onclick="
		$('#flipper').toggleClass('button_inactive');
		if($('#flipper').hasClass('button_inactive')){
			$('#flipper').unbind();
		} else {
			$('#flipper').overlay();
		};
		return false;" href="#"><span>Da Da Da</span></a>
	<a class="button button_inactive" id="flipper" rel="#porsche" onclick="this.blur();return false;" href="#"><span>Inactive</span></a>

Any idea why calling overlay() after the first binding doesn't work?

Thanks!

Got it!
Looking at the Overlook code it seems that a data element is associated with the trigger. So if the data element exists then the call to Overlay (which does the bind) never happens again.

So, the fix to the code above would be the unbind call:

$('#flipper').unbind('click').removeData('overlay');

With removeData added calling overlay() again later works fine.

Hm, interesting, thanks for posting the complete solution. Didn't know about removeData().