Opened 15 years ago
Closed 15 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 15 years ago by
Component: | core → fx |
---|---|
Milestone: | 1.2.2 → 1.2.4 |
comment:2 Changed 15 years ago by
Component: | fx → event |
---|---|
Resolution: | → invalid |
Status: | new → closed |
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.
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.