JQuery accordion - unbind click event

Question

I am writing a form wizard using JQuery's accordion module. The problem is I want to override any mouse clicks on the accordion menu so that the form is validated first before the accordion will show the next section.

I have tried the following:

$('#accordion h3').unbind();
    
$('#accordion h3').click(function() {
  if (validate())
  {
    $("#accordion").accordion('activate', 2);
  }else
  {
    alert("invalid form");
  }
}

But the above code doesn't work. The built-in click event of the accordion still gets called and the accordion shows the next section regardless of whether the form is valid or not.

I have also tried the following code:

$('#accordion h3').click(function(event) {
   if (validate())
   {
     $("#accordion").accordion('activate', 2);
   }else
   {
     alert("invalid form");
   }        
   event.stopPropagation();
});

But the stopPropagation() call doesn't seem to affect the accordion behaviour at all, the next section is displayed whether or not the form is valid.

Any idea what I may be doing wrong?

Anelace

Answer 1

Okay, took a break from coding this function and have come back to it with a fresh pair of eyes. Here's the solution:

$("#accordion").accordion({event: false});

Adding event:false to the accordion intitialization code will prevent mouse clicks on the accordion menu from executing the default action and then I can write custom click handling code to run the validate() function when user clicks on the menu, essentially overriding the accordion's built-in click function if the form fails the validation check.

BTW, I am using JQuery UI's accordion module here.

Works with ie7,8, chrome 19, ff 3.0.3

Anelace

I am having the exact same problem you did. How did you end up moving to the next accordion panel? – Nicki

Answer 2

event.stopPropogation() doesn't stop further event handlers registered with the event target from being called, it stops the event from bubbling up the DOM if event.bubbles is true. You might try having the event handler return false or calling event.preventDefault(), see here or here for more info.

Yore

Thanks, but I believe preventDefault() only prevents the default behaviour of the element I am interacting with - for example, preventDefault() on a link will stop the browser from loading a new page, and preventDefault() on a form prevents the form being submitted. With the accordion code, I am not trying to prevent a default action from happening, I am trying to prevent a customised action written in the accordion code from happening. Thanks for the suggestion, but preventDefault and 'return false' doesn't resolve the problem – Anelace

Answer 3

Judging from the source code, the event is not bound to the h3's, but to the surrounding container (the plugin uses event delegation). Moreover, the handler is not bound to click, but to click.ui-accordion. So try:

$('#accordion').unbind('click.ui-accordion');

And just for the record: There is no such thing (at least not yet) as "JQuery's accordion module". There are merely several accordion plugins for JQuery.

Obeded

Thanks, I tried $('#accordion').unbind(); before, but it didn't resolve the problem. I think the problem is which element the event is bound to, but I've tried unbinding pretty much every element in the accordion, but the click still gets detected and the code is still executed. – Anelace

Have you tried $('#accordion').unbind('click') or $('#accordion').unbind('click.ui-accordion')? There is a difference. Also try $('#accordion h3').unbind('click.ui-accordion'). It depends on the version you are using. – Obeded

Strange, but I've tried unbinding all elements inside the accordion and the click still gets registered by JQuery. I've tried all the following code: $('#accordion').unbind('click.ui-accordion'); $('#accordion').unbind('click'); $('#accordion h3').unbind('click.ui-accordion'); $('#accordion h3').unbind('click'); $('#accordion div').unbind('click.ui-accordion'); $('#accordion div').unbind('click'); $('#accordion div p').unbind('click.ui-accordion'); $('#accordion div p').unbind('click'); but to no avail... will keep working on this and will post any solution if I find one – Anelace

Answer 4

You have to write the below code together at the bottom of ready function:

$('#accordion h3').unbind('click');
$('#accordion a').unbind('click');

Snooty