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（）函数，基本上覆盖如果表单未通过验证检查，手风琴的内置点击功能。

BTW，我在这里使用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

您必须在就绪功能的底部一起编写以下代码：

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

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

4 个答案: