jQuery click function on LI doesn't work in IE

Question

I have a problem which is driving me nuts. I'm a relative Javascript newbie so please be kind :).

I have some existing code for a left navigation menu that makes use of the Treeview plugin for jQuery ( http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ ). To quickly explain it, where a line item has more line items under it, a little div with an image (usually an arrow) will be appended to the line item and this little div is clickable to expand the line items under it.

That's all very good, however I wish to now ignore the small div and allow the user to click anywhere on the line item to expand the items under it.

A snippet of the code for the menu:

<div class="page-body-left" id="leftmenu">
<ul>
<li class="expandable" style="background-color: red;"><a class="createlink" href="link1">link1</a>
<ul style="display: none;">
    <li><a class="createlink" href="link1a">link1a</a></li>
    <li class="last"><a class="createlink" href="link1b">link1b</a></li>
</ul>
</li>

I added in this code to try and add the functionality I wanted into the document.ready function:

jQuery("#leftmenu ul > li.expandable").click(function () {
    alert("Clicked!");
    jQuery(this).children("ul").slideToggle("fast");
});

This worked fine in Firefox. However in both IE6 and IE7 nothing happens, not even the alert. However if you click on the link itself, the behaviour is correct (but of course aside from the fact that you are navigated away from the page).

Some things I've tried are:

• Wrapping the ul in divs to click on instead but didn't work.
• Adding "jQuery('#leftmenu ul > li.expandable').css('background-color','red');" works.
• Pulling the list out of the menu context did at least display the alert, but I want to avoid rewriting the wheel and want to reuse as much of the Treeview inserted classes as I can.
• Binding the click function to a standard div works.

Can someone see where I've gone wrong? Is Treeview messing with my click function? If so what is causing this?? It is so frustrating that it's working fine in Firefox and not IE!

Thanks, Jenny

Answer 1

yeah seems like your selectors. why not directly reference to the UL element?

<div class="page-body-left" id="leftmenu">
<ul id="topmost">
  <li class="expandable" style="background-color: red;"><a class="createlink" href="link1">link1</a>
    <ul style="display: none;">
        <li><a class="createlink" href="link1a">link1a</a></li>
        <li class="last"><a class="createlink" href="link1b">link1b</a></li>
    </ul>
  </li>
</ul>
</div>

jQuery:

jQuery("#topmost li.expandable").click(function () {
        alert("Clicked!");
        jQuery(this).children("ul").toggle("fast");
});

Also, slideToggle didn't work for me. so i changed to toggle. it worked nicely.

Answer 2

I haven't tested your code, but this smells like a bug in Sizzle (the selector-engine).

In any case; you don't have to specify the full path to a given element. Try this out for size:

"#leftmenu .expandable"

On a side-note: Generally; the more complex your selectors are, the slower they run.

Answer 3

Thanks to both of you, the selectors were indeed the culprit - if i could vote i would but it wouldn't let me :).

Sometimes I'm not entirely sure what I'm doing with selectors as sometimes it works but when it doesn't i try all sorts of other things.

I wonder why it worked in Firefox though...

It still doesn't work in IE6 - but neither does some of the other script that I know works for other designs, so I think that's another issue.

Thanks again!

Answer 4

I assumed that the link1 will expand a link1a and b. why don't you try to make your it like this. This work for me.

<li li class="expandable" style="background-color: red;">
    <a class="createlink" onclick="return false;" href="#">Link1</a>
    <ul style="display: none;">
      <li>....</li>
      <li>....</li>
    </ul>
</li>

so you just need to add onclick and href="#", correct?