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?

Thanks!

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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

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