#6740 closed bug (fixed)

Opened December 10, 2010 03:30PM UTC

Closed February 21, 2011 03:08PM UTC

Last modified May 20, 2012 06:26PM UTC

Dynamically changing accordion's event handler doesn't actually change the behaviour

Reported by:	jjross	Owned by:
Priority:	minor	Milestone:	1.9.0
Component:	ui.accordion	Version:	1.8.7
Keywords:		Cc:
Blocked by:		Blocking:

Description

I'm trying to change the accordion's event handler on the fly but it doesn't appear to be working.

Business case is as follows:

I have a list of droppable items that are all under an accordion. When a user drags the draggable item towards the accordion I would like to change the accordion's event handler from "click" to "mouseover" so that they can hover over a panel and have it automatically expand. This will let them drop the item under any panel.

test case

In this page you can click the "Change event" text to change the accordion's event from (the default) "click" to "mouseover". However, the accordion itself doesn't start to respond to a mouseover. If you click the "Read event" you'll see that the "Display event status here" line changes to "mouseover". This proves that the value has been changed, however, the accordion's behaviour remains the same.

The above is for jquery 1.8.6 however I have also tested on 1.8.7 and the behaviour remains the same.

Attachments (0)

Change History (6)

Changed December 10, 2010 03:36PM UTC by scottgonzalez comment:1

status:	new → open

Changed December 10, 2010 03:40PM UTC by jjross comment:2

Here is a link to a test case:

http://jsfiddle.net/ubMrz/

I'm sorry, I just noticed the note to use jsFiddle.

Changed December 10, 2010 03:55PM UTC by scottgonzalez comment:3

description:	I'm trying to change the accordion's event handler on the fly but it doesn't appear to be working. \ \ Business case is as follows: \ \ I have a list of droppable items that are all under an accordion. When a user drags the draggable item towards the accordion I would like to change the accordion's event handler from "click" to "mouseover" so that they can hover over a panel and have it automatically expand. This will let them drop the item under any panel. \ \ Following is my test case: \ \ \ {{{ \ <!DOCTYPE HTML> \ <html lang="en"><head> \ <meta http-equiv="content-type" content="text/html; charset=UTF-8"> \ <meta charset="utf-8"> \ <title>jQuery UI Accordion - Test Case</title> \ <link rel="stylesheet" href="default_files/jquery.css"> \ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> \ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> \ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css"> \ <script> \ $(document).ready(function() { \ $( "#accordion" ).accordion(); \ $("#readEvent").bind('click', function (){ \ var event = $( "#accordion" ).accordion( "option", "event" ); \ $("#eventStatus").text(event); \ }); \ $("#changeEvent").bind('click', function (){ \ $( "#accordion" ).accordion( "option", "event", 'mouseover' ); \ alert("Change event to " + $( "#accordion" ).accordion( "option", "event" )); \ }); \ \ }); \ </script> \ <script> \ function showEventStatus(){ \ //var event = $( "#accordion" ).accordion( "option", "event" ); \ //$("#eventStatus").text(event); \ alert('Show'); \ } \ function changeEvent(){ \ //$( "#accordion" ).accordion( "option", "event", 'mouseover' ); \ alert('Change'); \ } \ \ \ </script> \ </head><body> \ \ <div class="demo"> \ \ <div id="accordion"> \ <h3><a href="#">Section 1</a></h3> \ <div> \ Section 1 content \ </div> \ <h3><a href="#">Section 2</a></h3> \ <div> \ Section 2 content \ </div> \ <h3><a href="#">Section 3</a></h3> \ <div> \ Section 3 content \ </div> \ </div> \ \ </div> \ \ </div> \ \ <div class="demo-description"> \ <p> \ <div id="changeEvent">Change Event</div> \ </p> \ <p> \ <div id="readEvent">Read Event</div> \ </p> \ <p id="eventStatus"> \ Display event Status here \ </p> \ </div> \ \ </body></html> \ }}} \ \ In this page you can click the "Change event" text to change the accordion's event from (the default) "click" to "mouseover". However, the accordion itself doesn't start to respond to a mouseover. If you click the "Read event" you'll see that the "Display event status here" line changes to "mouseover". This proves that the value has been changed, however, the accordion's behaviour remains the same. \ \ The above is for jquery 1.8.6 however I have also tested on 1.8.7 and the behaviour remains the same. \ → I'm trying to change the accordion's event handler on the fly but it doesn't appear to be working. \ \ Business case is as follows: \ \ I have a list of droppable items that are all under an accordion. When a user drags the draggable item towards the accordion I would like to change the accordion's event handler from "click" to "mouseover" so that they can hover over a panel and have it automatically expand. This will let them drop the item under any panel. \ \ [http://jsfiddle.net/ubMrz/ test case] \ \ In this page you can click the "Change event" text to change the accordion's event from (the default) "click" to "mouseover". However, the accordion itself doesn't start to respond to a mouseover. If you click the "Read event" you'll see that the "Display event status here" line changes to "mouseover". This proves that the value has been changed, however, the accordion's behaviour remains the same. \ \ The above is for jquery 1.8.6 however I have also tested on 1.8.7 and the behaviour remains the same. \

description:

I'm trying to change the accordion's event handler on the fly but it doesn't appear to be working. \ \ Business case is as follows: \ \ I have a list of droppable items that are all under an accordion. When a user drags the draggable item towards the accordion I would like to change the accordion's event handler from "click" to "mouseover" so that they can hover over a panel and have it automatically expand. This will let them drop the item under any panel. \ \ Following is my test case: \ \ \ {{{ \ <!DOCTYPE HTML> \ <html lang="en"><head> \ <meta http-equiv="content-type" content="text/html; charset=UTF-8"> \ <meta charset="utf-8"> \ <title>jQuery UI Accordion - Test Case</title> \ <link rel="stylesheet" href="default_files/jquery.css"> \ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> \ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> \ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css"> \ <script> \ $(document).ready(function() { \ $( "#accordion" ).accordion(); \ $("#readEvent").bind('click', function (){ \ var event = $( "#accordion" ).accordion( "option", "event" ); \ $("#eventStatus").text(event); \ }); \ $("#changeEvent").bind('click', function (){ \ $( "#accordion" ).accordion( "option", "event", 'mouseover' ); \ alert("Change event to " + $( "#accordion" ).accordion( "option", "event" )); \ }); \ \ }); \ </script> \ <script> \ function showEventStatus(){ \ //var event = $( "#accordion" ).accordion( "option", "event" ); \ //$("#eventStatus").text(event); \ alert('Show'); \ } \ function changeEvent(){ \ //$( "#accordion" ).accordion( "option", "event", 'mouseover' ); \ alert('Change'); \ } \ \ \ </script> \ </head><body> \ \ <div class="demo"> \ \ <div id="accordion"> \ <h3><a href="#">Section 1</a></h3> \ <div> \ Section 1 content \ </div> \ <h3><a href="#">Section 2</a></h3> \ <div> \ Section 2 content \ </div> \ <h3><a href="#">Section 3</a></h3> \ <div> \ Section 3 content \ </div> \ </div> \ \ </div> \ \ </div> \ \ <div class="demo-description"> \ <p> \ <div id="changeEvent">Change Event</div> \ </p> \ <p> \ <div id="readEvent">Read Event</div> \ </p> \ <p id="eventStatus"> \ Display event Status here \ </p> \ </div> \ \ </body></html> \ }}} \ \ In this page you can click the "Change event" text to change the accordion's event from (the default) "click" to "mouseover". However, the accordion itself doesn't start to respond to a mouseover. If you click the "Read event" you'll see that the "Display event status here" line changes to "mouseover". This proves that the value has been changed, however, the accordion's behaviour remains the same. \ \ The above is for jquery 1.8.6 however I have also tested on 1.8.7 and the behaviour remains the same. \ → I'm trying to change the accordion's event handler on the fly but it doesn't appear to be working. \ \ Business case is as follows: \ \ I have a list of droppable items that are all under an accordion. When a user drags the draggable item towards the accordion I would like to change the accordion's event handler from "click" to "mouseover" so that they can hover over a panel and have it automatically expand. This will let them drop the item under any panel. \ \ [http://jsfiddle.net/ubMrz/ test case] \ \ In this page you can click the "Change event" text to change the accordion's event from (the default) "click" to "mouseover". However, the accordion itself doesn't start to respond to a mouseover. If you click the "Read event" you'll see that the "Display event status here" line changes to "mouseover". This proves that the value has been changed, however, the accordion's behaviour remains the same. \ \ The above is for jquery 1.8.6 however I have also tested on 1.8.7 and the behaviour remains the same. \

Thanks for creating the jsFiddle test case, I've removed the inline code from the description.

Changed December 10, 2010 04:16PM UTC by jjross comment:4

No worries. Should've noticed before.

Changed February 21, 2011 03:08PM UTC by Scott González comment:5

resolution:	→ fixed
status:	open → closed

Accordion: Handle changing the event option. Fixes #6740 - Dynamically changing accordion's event handler doesn't actually change the behaviour.

Changeset: f70f01af9ea1d1d191b77fab6dadbbe421be43a8

Changed May 20, 2012 06:26PM UTC by scottgonzalez comment:6

#8336 is a duplicate of this ticket.

Search and Top Navigation