0

我使用 beautytips 插件创建了一个 javascript 工具,该插件使用 beautytips 显示列表选项菜单,然后将操作绑定到该菜单。

我从一个简单的 div 开始定义菜单项

<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>

然后使用以下代码实例化美容提示:

    $("#menu-toggle").bt({
        contentSelector: "$('#menu-div').html()",
        preShow: function(box) {
        $("a[id^=link-]").click(function() {
           //do something
        });
    });

我添加了“preShow”功能,因为由于某种原因,直到启用 div 之后它才找到“链接-”ID..(?)。这在 firefox、safari 和 chrome 中完美运行,因为我可以单击菜单切换,查看三个链接,单击链接一并让链接一发生正确的操作,依此类推。

这在 Internet Explorer 中也可以正常工作,但仅限于第一次。第二次通过(单击显示菜单,单击另一个链接),Internet Explorer 似乎无法找到相同的 ID。

关闭菜单后是否必须解除绑定?

下面是美容小贴士如何处理 preShow 函数:

// trigger preShow function
// function receives the box element (the balloon wrapper div) as an argument
opts.preShow.apply(this, [$box[0]]);
4

2 回答 2

0

这段代码看起来好像缺少一个花括号

$("#menu-toggle").bt({
    contentSelector: "$('#menu-div').html()",
    preShow: function(box) {
      $("a[id^=link-]").click(function() {
        //do something
      });
    } // this curly brace was missing
});
于 2011-04-15T20:46:35.483 回答
0

感谢所有的建议 - 我想我在回过头来解决我的问题并意识到我只需要找到一种方法来每次取消绑定事件处理程序以使其在 Internet Explorer 中工作。BeautyTips 有一个隐藏后回调非常适合这个,所以我应用了以下代码:

postHide: function(box) { 
        $("a[id^=link-]").unbind();
    },

这在所有浏览器中都按预期工作。任何人都知道一个很好的资源来理解为什么事件处理在 Internet Explorer 中的工作方式会如此不同?

于 2011-04-17T21:04:08.110 回答