Side navigation
#9279 closed bug (fixed)
Opened May 13, 2011 09:48PM UTC
Closed September 21, 2011 03:30AM UTC
Last modified March 08, 2012 05:36PM UTC
delegate() bind does not handle mouseover/mouseout and mouseenter/mouseout correctly for selected elements
| Reported by: | thej3tan@gmail.com | Owned by: | dmethvin |
|---|---|---|---|
| Priority: | blocker | Milestone: | 1.7 |
| Component: | event | Version: | 1.6.1 |
| Keywords: | 1.7-discuss | Cc: | |
| Blocked by: | Blocking: |
Description
Affects Version 1.6.1 only, 1.6 works fine
Tested in Firefox(3.6) and Chrome
Windows XP
May be related to Ticket #9069
Test Case:
<div id="test_box">
Test Box<br><br>
<a href="#" class="test1">Test 1</a><br><br>
<a href="#" class="test2">Test 2</a>
</div>
<script>
$(document).ready(function() {
$("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); });
$("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); });
$("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); });
$("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); });
});
mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6.
Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired.
Attachments (0)
Change History (20)
Changed May 13, 2011 10:00PM UTC by comment:1
| component: | unfiled → event |
|---|---|
| owner: | → thej3tan@gmail.com |
| status: | new → pending |
Changed May 13, 2011 10:09PM UTC by comment:2
| status: | pending → new |
|---|
Reduced Test Case
Changed May 14, 2011 09:48AM UTC by comment:3
| priority: | undecided → low |
|---|---|
| status: | new → open |
Confirmed. Works fine with 1.6 and below but there appears to be a regression in 1.6.1 where mouseover and mouseout aren't firing or being bound correctly.
Changed May 14, 2011 10:04PM UTC by comment:4
This might be a little less cluttered for the basis of a unit/ref test
Changed May 17, 2011 01:51PM UTC by comment:5
| priority: | low → blocker |
|---|
Changed May 22, 2011 07:27PM UTC by comment:7
| keywords: | → 1.7-discuss |
|---|
Nominating ticket for 1.7 discussion.
Changed May 22, 2011 08:43PM UTC by comment:8
| description: | Affects Version 1.6.1 only, 1.6 works fine \ \ Tested in Firefox(3.6) and Chrome \ Windows XP \ \ May be related to Ticket #9069 \ \ Test Case: \ \ <div id="test_box"> \ Test Box<br><br> \ <a href="#" class="test1">Test 1</a><br><br> \ <a href="#" class="test2">Test 2</a> \ </div> \ <script> \ $(document).ready(function() { \ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); }); \ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); }); \ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); }); \ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); }); \ }); \ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6. \ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired. → Affects Version 1.6.1 only, 1.6 works fine\ \ Tested in Firefox(3.6) and Chrome\ Windows XP\ \ May be related to Ticket #9069\ \ Test Case:\ \ <div id="test_box">\ Test Box<br><br>\ <a href="#" class="test1">Test 1</a><br><br>\ <a href="#" class="test2">Test 2</a>\ </div>\ <script>\ $(document).ready(function() {\ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); });\ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); });\ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); });\ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); });\ });\ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6.\ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired. |
|---|
+1, Seems like a bug, should be fixed
Changed May 23, 2011 12:50AM UTC by comment:9
+1, Bug bug bug
Changed May 23, 2011 04:48AM UTC by comment:10
+1,
Changed May 24, 2011 09:55PM UTC by comment:11
| description: | Affects Version 1.6.1 only, 1.6 works fine\ \ Tested in Firefox(3.6) and Chrome\ Windows XP\ \ May be related to Ticket #9069\ \ Test Case:\ \ <div id="test_box">\ Test Box<br><br>\ <a href="#" class="test1">Test 1</a><br><br>\ <a href="#" class="test2">Test 2</a>\ </div>\ <script>\ $(document).ready(function() {\ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); });\ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); });\ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); });\ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); });\ });\ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6.\ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired. → Affects Version 1.6.1 only, 1.6 works fine \ \ Tested in Firefox(3.6) and Chrome \ Windows XP \ \ May be related to Ticket #9069 \ \ Test Case: \ \ <div id="test_box"> \ Test Box<br><br> \ <a href="#" class="test1">Test 1</a><br><br> \ <a href="#" class="test2">Test 2</a> \ </div> \ <script> \ $(document).ready(function() { \ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); }); \ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); }); \ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); }); \ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); }); \ }); \ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6. \ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired. |
|---|
+1, although this is a bug not a feature.
Changed June 03, 2011 02:01PM UTC by comment:12
| description: | Affects Version 1.6.1 only, 1.6 works fine \ \ Tested in Firefox(3.6) and Chrome \ Windows XP \ \ May be related to Ticket #9069 \ \ Test Case: \ \ <div id="test_box"> \ Test Box<br><br> \ <a href="#" class="test1">Test 1</a><br><br> \ <a href="#" class="test2">Test 2</a> \ </div> \ <script> \ $(document).ready(function() { \ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); }); \ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); }); \ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); }); \ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); }); \ }); \ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6. \ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired. → Affects Version 1.6.1 only, 1.6 works fine\ \ Tested in Firefox(3.6) and Chrome\ Windows XP\ \ May be related to Ticket #9069\ \ Test Case:\ \ <div id="test_box">\ Test Box<br><br>\ <a href="#" class="test1">Test 1</a><br><br>\ <a href="#" class="test2">Test 2</a>\ </div>\ <script>\ $(document).ready(function() {\ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); });\ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); });\ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); });\ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); });\ });\ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6.\ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired. |
|---|
+1
Changed June 05, 2011 09:54PM UTC by comment:13
| description: | Affects Version 1.6.1 only, 1.6 works fine\ \ Tested in Firefox(3.6) and Chrome\ Windows XP\ \ May be related to Ticket #9069\ \ Test Case:\ \ <div id="test_box">\ Test Box<br><br>\ <a href="#" class="test1">Test 1</a><br><br>\ <a href="#" class="test2">Test 2</a>\ </div>\ <script>\ $(document).ready(function() {\ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); });\ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); });\ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); });\ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); });\ });\ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6.\ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired. → Affects Version 1.6.1 only, 1.6 works fine \ \ Tested in Firefox(3.6) and Chrome \ Windows XP \ \ May be related to Ticket #9069 \ \ Test Case: \ \ <div id="test_box"> \ Test Box<br><br> \ <a href="#" class="test1">Test 1</a><br><br> \ <a href="#" class="test2">Test 2</a> \ </div> \ <script> \ $(document).ready(function() { \ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); }); \ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); }); \ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); }); \ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); }); \ }); \ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6. \ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired. |
|---|
+1, BUG should be fixed for 1.6.2
Changed June 06, 2011 03:01PM UTC by comment:14
| description: | Affects Version 1.6.1 only, 1.6 works fine \ \ Tested in Firefox(3.6) and Chrome \ Windows XP \ \ May be related to Ticket #9069 \ \ Test Case: \ \ <div id="test_box"> \ Test Box<br><br> \ <a href="#" class="test1">Test 1</a><br><br> \ <a href="#" class="test2">Test 2</a> \ </div> \ <script> \ $(document).ready(function() { \ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); }); \ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); }); \ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); }); \ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); }); \ }); \ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6. \ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired. → Affects Version 1.6.1 only, 1.6 works fine\ \ Tested in Firefox(3.6) and Chrome\ Windows XP\ \ May be related to Ticket #9069\ \ Test Case:\ \ <div id="test_box">\ Test Box<br><br>\ <a href="#" class="test1">Test 1</a><br><br>\ <a href="#" class="test2">Test 2</a>\ </div>\ <script>\ $(document).ready(function() {\ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); });\ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); });\ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); });\ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); });\ });\ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6.\ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired. |
|---|
+1
Changed June 06, 2011 03:11PM UTC by comment:15
-1, cleverness != elegance
Changed June 15, 2011 03:12PM UTC by comment:16
This is almost certainly due to the changeset for #9069. Reverse-applying https://github.com/jquery/jquery/commit/419b5e5e2a0d376e71c3f37bf9a3d96f3b4a67f2 fixes this bug (but would also regress #9069, so darn).
Changed June 15, 2011 03:24PM UTC by comment:17
| description: | Affects Version 1.6.1 only, 1.6 works fine\ \ Tested in Firefox(3.6) and Chrome\ Windows XP\ \ May be related to Ticket #9069\ \ Test Case:\ \ <div id="test_box">\ Test Box<br><br>\ <a href="#" class="test1">Test 1</a><br><br>\ <a href="#" class="test2">Test 2</a>\ </div>\ <script>\ $(document).ready(function() {\ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); });\ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); });\ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); });\ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); });\ });\ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6.\ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired. → Affects Version 1.6.1 only, 1.6 works fine \ \ Tested in Firefox(3.6) and Chrome \ Windows XP \ \ May be related to Ticket #9069 \ \ Test Case: \ \ <div id="test_box"> \ Test Box<br><br> \ <a href="#" class="test1">Test 1</a><br><br> \ <a href="#" class="test2">Test 2</a> \ </div> \ <script> \ $(document).ready(function() { \ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); }); \ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); }); \ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); }); \ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); }); \ }); \ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6. \ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired. |
|---|
@hlian this bug is on the 1.7 fix list, so rest assured it will be dealt with for that release :)
Changed July 12, 2011 02:42PM UTC by comment:18
| milestone: | 1.next → 1.7 |
|---|---|
| owner: | thej3tan@gmail.com → dmethvin |
| status: | open → assigned |
Changed September 08, 2011 01:46PM UTC by comment:19
This code was reworked in 1.7, and yes there were issues that caused interference between mouseenter/leave and mouseover/out. I've created jquery/test/hovertest.html in the repo to verify all the cases work properly in 1.7 now.
Changed September 21, 2011 03:30AM UTC by comment:20
| resolution: | → fixed |
|---|---|
| status: | assigned → closed |
Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!
Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, I've created this boilerplate: http://jsfiddle.net/rwaldron/da3nM/ Open the link and click to "Fork" in the top menu.