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?

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