html - jquery live() 函数和 AJAX 加载内容的问题

Question

对于我正在实现的交互设计技巧，我对 jquery 有一点疑问。我有一个链接和一个隐藏的下拉菜单，用于在用户单击该链接时显示。如果用户单击链接或菜单之外，我希望下拉菜单隐藏。这两个元素都位于使用 AJAX 动态加载的页面部分(因此使用了 live() 函数)。如果我在非 AJAX 重新加载的容器上执行此操作，一切正常，但一旦它是动态加载的内容就无法正常工作(下拉菜单显示，但如果我在外部单击则不会隐藏)。我的代码如下:

$("#clickToOpen").live('click',function(event) {
    $("#dropdownMenu").show();
    event.stopPropagation();
});

$("#dropdownMenu").live('click',function(event){
    event.stopPropagation();
});

$(document).live('click',function() {
    $("#dropdownMenu").hide(); 
});

(我也尝试直接为(文档)上的最后一个事件使用 click() 函数，因为这个元素没有重新加载，但不起作用)

有什么想法吗？

Answer 1

如果我错了，应该有人纠正我。

但是根据我对 .live 的理解，调用 event.stopPropagation() 根本没有任何效果，因为对于 live to work 它附加到窗口或文档对象，因此，它已经尽可能地传播了。

关于隐藏菜单，

我相信您应该考虑添加一个透明覆盖层，与模态对话框使用的一样。

然后您将绑定(bind)到叠加层以隐藏菜单。