I've created a javascript tool using the beautytips plugin that uses beautytips to display a menu of list options which I then bind actions to.
I'm starting with a simple div to define the menu items
<div id="menu-div">
<a href="javascript:;" id="link-one">text link one</a><br />
<a href="javascript:;" id="link-two">text link two</a><br />
<a href="javascript:;" id="link-three">text link three</a><br />
</div>
and then instantiating the beauty tip with the following code:
$("#menu-toggle").bt({
contentSelector: "$('#menu-div').html()",
preShow: function(box) {
$("a[id^=link-]").click(function() {
//do something
});
});
I added the 'preShow' function because for some reason it wasn't finding the "link-" ids until after the div was enabled.. (?). This worked perfectly in firefox, safari, and chrome in that I could click the menu-toggle, view the three links, click link one and have the correct action of link one occur and so on.
This works ok in Internet explorer as well but only on the first time. The second time through (click to display the menu, click another link), internet explorer can't seem to find the same ids.
Do I have to unbind the function after I close the menu?
here is how beauty tips is processing the preShow function:
// trigger preShow function
// function receives the box element (the balloon wrapper div) as an argument
opts.preShow.apply(this, [$box[0]]);