Bug Tracker

Opened 12 years ago

Closed 12 years ago

#2532 closed bug (invalid)

Only first action with function works, everything else 'breaks'

Reported by: nova Owned by:
Priority: major Milestone: 1.2.4
Component: event Version: 1.2.3
Keywords: Cc:
Blocked by: Blocking:

Description

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

Change History (2)

comment:1 Changed 12 years ago by davidserduke

Component: corefx
Milestone: 1.2.21.2.4

I suspect the problem you are having is that .hover() requires TWO functions as parameters, not just one:

http://docs.jquery.com/Events/hover

Try something like this.

  $(".openrightslice a").hover(function(){ 
    $(".rightslice").slideDown("fast");
  }, function () { 
    $(".rightslice").slideUp("fast");
  }); 

comment:2 Changed 12 years ago by flesler

Component: fxevent
Resolution: invalid
Status: newclosed

You can now do:

$(".openrightslice a").bind('mouseenter', function(){

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

));

Your test case is too generic, I really think the problem happened because of the lack of the second function.

I'll close, reopen if you still find the problem, using my code or david's.

Note: See TracTickets for help on using tickets.