I am very impressed with jquery, but there is a major bug

with jquery-1.2.2.js and jquery-1.2.3.js.

Quick summary:

Only the very first action that requires a function

(i.e. $("a").hover(function(){ ... ); works and everything

after does not work.

I was just about to give up on JQuery and move on to something else when I had the idea that maybe the problem was with jquery-1.2.3.js (the latest version at the time of this bug report). So, I downloaded jquery-1.1.4.js and used that instead, and it functioned as promised.

Here are the jquery versions I tried:

jquery-1.2.3.js, jquery-1.2.2.js, jquery-1.2.1.js, jquery-1.1.4.js

The bug shows up starting with jquery-1.2.2.js, and

carried over to jquery-1.2.3.js. The other two versions

worked just fine for me.

Each time I used the uncompressed versions.

Also, I was using firefox 2 and ie7 on windows xp.

The problem existed for both browsers for 1.2.2 and 1.2.3.

Here is the exact code:

<script src="../jquery-1.2.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".openrightslice a").hover(function(){

$(".rightslice").slideToggle("fast");

});

$(".minitoolbar").hover(function(){

$(".minitoolbar a").slideToggle("fast");

});

});

</script>

and here is the html:

<div class="pcontainer">

<div class="left">

<p class="editable" id="first">This is a test for JQuery.</p>

<div class="minitoolbar">

<a href="#" class="editlink">edit</a><a href="#" class="editlink">delete</a>

</div>

</div>

<div class="right">

<p class="openrightslice"><a href="#">+</a></p>

<p class="rightslice">Option 1</p>

<p class="rightslice">Option 2</p>

</div>

</div>

and if here is the css:

<style type="text/css">

a.editlink{

margin:.6em;

}

.minitoolbar{

border:1px solid lightblue;

}

.pcontainer{

position:relative;

width:20em;

margin:1em;

padding:.5em;

}

.left{

width:15em;

/*margin:1em;*/

position:absolute;

left:1em;

}

.right{

width:2em;

position:absolute;

left:17em;

}

</style>

I tried about 50 variations, but every single time, only the

very first action (with its own function) would work.

For example, this would work just fine:

$(".openrightslice a").hover(function(){

$(".rightslice").slideToggle("fast");

});

but if I had it this way:

$(".openrightslice a").hover(function(){

$(".rightslice").slideToggle("fast");

});

$(".minitoolbar").hover(function(){

$(".minitoolbar a").slideToggle("fast");

});

only this part would actually work:

$(".openrightslice a").hover(function(){

$(".rightslice").slideToggle("fast");

});

and if I merely switched the order:

$(".minitoolbar").hover(function(){

$(".minitoolbar a").slideToggle("fast");

});

$(".openrightslice a").hover(function(){

$(".rightslice").slideToggle("fast");

});

then only this would work:

$(".minitoolbar").hover(function(){

$(".minitoolbar a").slideToggle("fast");

});

I then tried splitting the actions into seperate parts:

$(document).ready(function(){

action goes here

});

$(document).ready(function(){

action goes here

});

but again, only the very first action would work.

Even if I split it into different scripts, only

the very first action would work (provided it had

a function).

I noticed jquery-1.2.3.js only 'breaks' when

the action has its own function. So it appears

that it can keep running actions until there is

one that requires a function (i.e. click, hover, etc.).

Thank you! I hope this was helpful.

-Matt