JQuery on DIV in IE only works on text and nowhere on DIV ...?

Question

I have a DIV:

<div id="leftBoxTools" class="toolboxHeaders" style="margin-top: 10px; width: 100%"> TOOLS</div> 

that I want to fire the click event when someone clicks on it, so I can make a kind of collapsible toolbar:

  $(".toolboxHeaders").click(function () { $(this).next().slideToggle("slow"); }); 

It works fine in ff and chrome, but in ie9 it works only if you click on the actual text and nowhere in the div ... any ideas?

UPDATE: To make this a bit clearer, all this happens in the JQ UI dialog box. Not sure if this can cause problems. I looked at JSFiddle from this post and they all work fine in IE9. However, I still cannot get my problem to work.

I also do all this in an old aspx application using frames and master pages (guh) ... so it is very difficult to say what causes this.

I changed doctype to HTML5, but still can't get it to fire on anything other than text.

Answer 1

Double check DOCTYPE .

I did a live test, http://jsfiddle.net/kYcD9/ , and it works fine in IE9.

Answer 2

I had the same problem, it turned out that in my css file I had:

body { z-index: -1}

After removal, everything works fine. That's why they worked in jsfiddle, not mine.

Answer 3

it works fine in IE9 ( jsfiddle )

Here is the code:

  <div id="leftBoxTools" class="toolboxHeaders" style="margin-top: 10px; width: 100%; height:60px; background-color:red;"> TOOLS </div> <div>another </div> 

JS:

 $(".toolboxHeaders").click(function () { $(this).next().slideToggle("slow"); }); 

div with the content “other” will slide up / down when clicked anywhere in the red area.

Answer 4

Perhaps the reason I had this problem was different, but for me it decided that this gives the div property for the background:

 .myactivediv { ... background: #E8E6EE; ... }