8

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

我尝试了以下方法：

$('#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() 调用似乎根本不会影响手风琴行为，无论表单是否有效，都会显示下一部分。

知道我可能做错了什么吗？

4

4 回答 4

13

好的，从编写此函数的代码中休息一下，并以全新的眼光回到它。这是解决方案：

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

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

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

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

于 2009-11-27T12:29:35.993 回答
0

event.stopPropogation()不会阻止向事件目标注册的进一步事件处理程序被调用，它会阻止事件在 DOM 中冒泡（如果event.bubbles为真）。您可以尝试让事件处理程序返回false或调用event.preventDefault()，请参阅此处或此处了解更多信息。

于 2009-11-25T04:12:13.787 回答
0

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

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

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

于 2009-11-25T04:17:02.653 回答
0

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

$('#accordion h3').unbind('click');
$('#accordion a').unbind('click');
于 2010-06-28T13:05:59.490 回答