Opened 12 years ago

Last modified 10 years ago

#6740 closed bug

Dynamically changing accordion's event handler doesn't actually change the behaviour — at Initial Version

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.

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.

Change History (0)

Note: See TracTickets for help on using tickets.