0

im facing issues with multiple toggling on IE. it works fine with all other browser except IE (-_-). below is a abstract of my code.basically im only able to get an popup alert when i clicked on the first hyperlink. there were no popup when i clicked on subsequent links

 $(document).ready(function(){

$("a#toggleFruitSlideBox").click(function() {
          alert($(this).text());
      return false;
  });
});

<div id="bodykit_slidebox">
<div style="padding:5px 0px 0px 5px;">
    <a id="toggleFruitSlideBox" href="#" class="nav2">apple</a>
    <a id="toggleFruitSlideBox" href="#" class="nav2">orange</a>
    <a id="toggleFruitSlideBox" href="#" class="nav2">DURIAN</a>
    <a id="toggleFruitSlideBox" href="#" class="nav2">papaya</a>
</div>
gdoron
  • 147,333
  • 58
  • 291
  • 367
chrizonline
  • 4,779
  • 17
  • 62
  • 102

2 Answers2

4

You have multiple elements with the same id it is an invalid HTML!

Check my answer here:
jQuery id selector works only for the first element

The only difference between your code and the code in the other question is that you use a bad selector:

$("a#toggleFruitSlideBox")

Which cause jQuery not to use the document.getElementById, so this is why it works in other browsers.

From the jQuery docs:

For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match.

Remove the duplicated id and use other selector like the class selector.

Community
  • 1
  • 1
gdoron
  • 147,333
  • 58
  • 291
  • 367
1

Looks like the problem is that all your Id's are the same. Id's are supposed to be unique. Either use a class or just use the a selector if you don't care if it fires on all a tags.

nathan hayfield
  • 2,627
  • 1
  • 17
  • 28
  • hey nathan, tks for pointing that out. you are right. i have to use the class selector instead. it is working now. – chrizonline Oct 17 '12 at 04:44