JQuery手风琴-解除点击事件绑定

Question

我正在使用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()调用似乎并没有影响手风琴的行为，无论表单是否有效，下一节都会显示。

有什么想法我可能做错了吗？

- Stinky Tofu

Answer 1

好的，我从编写这个函数中休息了一会儿，现在用一双清晰的眼睛回来了。以下是解决方案：

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

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

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

适用于 ie7、8、chrome 19、ff 3.0.3。

- Stinky Tofu

---

我遇到了和你一模一样的问题。你是怎么跳转到下一个手风琴面板的？ - Aaron Hill

Answer 2

从源代码判断，事件并没有绑定在h3元素上，而是绑定在周围的容器上（插件使用事件委托）。此外，处理程序不是绑定在"click"上，而是绑定在"click.ui-accordion"上。所以尝试以下代码：

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

仅供参考：目前还没有所谓的“JQuery手风琴模块”，只有几个适用于JQuery的手风琴插件。

- Tom Bartel

---

谢谢，我之前尝试过$('#accordion').unbind();，但它并没有解决问题。我认为问题在于事件绑定的元素，但我已经尝试了几乎所有手风琴中的元素进行解绑，但点击仍然被检测到并且代码仍然被执行。 - Stinky Tofu

你尝试过 $('#accordion').unbind('click') 或者 $('#accordion').unbind('click.ui-accordion') 吗？它们之间是有区别的。另外，也可以尝试 $('#accordion h3').unbind('click.ui-accordion')。这取决于你使用的版本。 - Tom Bartel

有点奇怪，但我已经尝试解除手风琴内所有元素的绑定，但点击仍然被JQuery注册。我已经尝试了以下所有代码： $('#accordion').unbind('click.ui-accordion'); $('#accordion').unbind('click'); $('#accordion h3').unbind('click.ui-accordion'); $('#accordion h3').unbind('click'); $('#accordion div').unbind('click.ui-accordion'); $('#accordion div').unbind('click'); $('#accordion div p').unbind('click.ui-accordion'); $('#accordion div p').unbind('click');但是都没有用... 我会继续努力解决，并在找到解决方案后发布。 - Stinky Tofu

Answer 3

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

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

- Ashwin Chetri

Answer 4

event.stopPropogation() 不会阻止事件目标上注册的其他事件处理程序被调用，它只会在 event.bubbles 为 true 时停止事件从 DOM 冒泡。您可以尝试让事件处理程序返回 false 或调用 event.preventDefault()，请参见 此处 或 此处 获取更多信息。

- Ryan Lynch

---

谢谢，但我相信preventDefault()只会阻止我正在交互的元素的默认行为 - 例如，在链接上使用preventDefault()将停止浏览器加载新页面，在表单上使用preventDefault()将防止表单被提交。对于手风琴代码，我不是试图阻止默认操作发生，而是试图阻止手风琴代码中编写的自定义操作发生。感谢您的建议，但preventDefault和'return false'无法解决问题。 - Stinky Tofu