JQuery手风琴 - 取消绑定点击事件

Question

我正在使用 JQuery 的 accordion module 编写表单向导。问题是我想覆盖手风琴菜单上的任何鼠标点击，以便在手风琴显示下一部分之前首先验证表单。

我尝试了以下方法：

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

但是上面的代码不起作用。手风琴的内置点击事件仍然被调用，无论表单是否有效，手风琴都会显示下一部分。

我也试过下面的代码：

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

但是 stopPropagation() 调用似乎根本不会影响手风琴的行为，无论表单是否有效，都会显示下一部分。

知道我做错了什么吗？

Answer 1

好的，在编写这个函数的过程中休息一下，并以全新的眼光回到它。这是解决方案：

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

将 event:false 添加到手风琴初始化代码将阻止鼠标单击手风琴菜单执行默认操作，然后我可以编写自定义单击处理代码以在用户单击菜单时运行 validate() 函数，本质上是覆盖如果表单未通过验证检查，则手风琴的内置单击功能。

顺便说一句，我在这里使用 JQuery UI 的手风琴模块。

适用于 ie7,8, chrome 19, ff 3.0.3

Answer 2

event.stopPropogation() 不会阻止在事件目标中注册的更多事件处理程序被调用，如果event.bubbles 为真，它会阻止事件在 DOM 中冒泡。您可以尝试让事件处理程序返回 false 或调用 event.preventDefault()，有关详细信息，请参阅 here 或 here。

Answer 3

从源码来看，事件并没有绑定到h3，而是绑定到了周围的容器（插件使用了事件委托）。此外，处理程序未绑定到click，而是绑定到click.ui-accordion。所以试试：

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

仅作记录：没有“JQuery 的手风琴模块”之类的东西（至少现在还没有）。 JQuery 只有几个手风琴插件。

Answer 4

你必须在ready函数的底部一起编写下面的代码：

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