Question

我的页面底部有一个工具栏菜单。我有一个函数，它检查包含菜单项的块的显示属性，如果它是“阻塞”则将其设置为“无”，或者如果它是“无”则将其设置为“阻止”。

我正在使用jQuery将事件绑定到对象。我想使用live（）方法，因为我可以动态地将项添加到此工具栏，我希望事件自动附加到新的菜单元素。

我遇到的问题是，当我使用live（）将事件绑定到元素时，我正在检查的元素的CSS显示属性始终为“none”。因此，菜单永远不会关闭。

如果我使用bind（）而不是live（），那么一切都像我期望的那样。

使用live（）导致这种奇怪的行为是什么？

重现问题的演示页面是http://www.ghodmode.com/tbdemo

谢谢。

- Ghodmode

Answer 1

我建议使用delegate代替live和toggle来显示/隐藏元素。

delegate的优点是你可以指定处理一组事件的根元素（如果live，则根始终是document，这可能非常无效）。的 [Working demo]

$(document).ready(function () { var self = new Toolbar(); $(".j_toolbar") .delegate(".j_has_submenu", "mouseover", self.show_submenu) .delegate(".j_has_submenu .j_submenu", "mouseout", self.delay_hide) .delegate(".j_has_menu", "click", self.show_menu); $("body").click(self.hide_menu); });

注意：delegate
需要1.4.2

Answer 2

如果你说通过.live()附加的处理程序永远不会触发，如果你在.live()的目标和执行{document的{{1}}之间有一些其他处理程序，通常会发生这种情况。 {1}}或return false;。

原因是event.stopPropagation() 依赖事件冒泡到文档以调用处理程序。任何阻止冒泡的事情都会导致.live()。

.live()

Answer 3

因为使用.live（）绑定的回调是通过事件委托执行的，所以将调用.live（）目标和文档之间的任何处理程序。查看代码可以看到self.hide_menu绑定到body元素。当事件从具有类.j_has_menu的目标冒泡时，将执行body（self.hide_menu）上的单击处理程序，从而关闭菜单。 self.hide_menu不返回false，因此事件继续冒泡，直到它到达文档根并调用您期望的函数self.show_menu。这意味着当菜单打开并单击它时，首先运行self.hide_menu，然后立即运行self.show_menu，以便菜单永久打开。

$(document).ready(function () {
    var self = new Toolbar();
    $(".j_has_submenu").live("mouseover", self.show_submenu);
    $(".j_has_submenu .j_submenu").live("mouseout", self.delay_hide);
    $(".j_has_menu").live("click", self.show_menu);
    $('.j_toolbar').siblings().add('body').click(self.hide_menu); // <-- the culprit
});

jQuery事件.live（）怪异

3 个答案: