jquery live() 函数和 AJAX 加载内容的问题答案

【问题标题】：Problem with the jquery live() function and AJAX-loaded contentjquery live() 函数和 AJAX 加载内容的问题
【发布时间】：2011-08-28 12:35:32
【问题描述】：

对于我正在实施的交互设计技巧，我对 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() 函数，因为该元素没有重新加载，但不起作用）

有什么想法吗？

【问题讨论】：

标签： html ajax dom jquery

【解决方案1】：

我觉得你可以创建一个类

.hide {
display:none;
}

并使用这样的切换类...

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

不是经过测试的代码...

这是你的最终代码......

    <!DOCTYPE html>
<html>
<head>
 <style>
.hide {
display:none;
}

.show {
display:visible;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<a href='' id='clickToOpen'>click me</a>

<div id='dropdownMenu' class='hide'>dropdownMenu</div>

<script>
$("#clickToOpen").live('click',function(event) {
$('#dropdownMenu').toggleClass("hide");
event.preventDefault();
})
</script>

</body>
</html>

【讨论】：

【解决方案2】：

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

但就我对.live 的理解而言，调用event.stopPropagation() 根本不会产生任何影响，因为对于实时工作，它已附加到窗口或文档对象，因此，它已经尽可能地传播了。

关于隐藏菜单，

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

然后你绑定到覆盖层来隐藏菜单。

【讨论】：