开发者

issues with jquery function definition in internet explorer?

开发者 https://www.devze.com 2023-02-26 04:03 出处:网络
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'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>&l开发者_如何学Got;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]]);


This code looks like it is missing a curly brace

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


Thanks all for the suggestions - I think I worked it out after going back through my question and realizing I just needed to find a way to unbind the event handler each time for this to work in Internet Explorer. BeautyTips has a post-hide callback that works perfectly for this so I applied the following code:

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

and this worked as expected across all browsers. Anyone know a good resource for understanding why the event handling would work so differently in Internet Explorer?

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号