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

发布于 2024-11-08 11:28:20 字数 590 浏览 0 评论 0原文

对于我正在实现的交互设计技巧，我对 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() 函数来处理（文档）上的最后一个事件，因为该元素未重新加载，但不起作用）

有什么想法吗？

原文

i have a little problem with jquery for an interaction design trick i'm implementing. I have a link and a hidden drop-down menu to show when the user clicks on the link. I want the dropdown menu to hide if the user clicks out of the link or menu. Both of these elements are on the portion of a page loaded dynamically with AJAX (hence the use of the live() function). Everything works fine if I do it on a non AJAX-reloaded container, but doesn't work as soon as it's a dynamically loaded content (the dropdown menu shows, but doesn't hide if i click outside). My code is the following:

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

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

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

(i also tried with the click() function directly for the last event on (document), since this element is not reloaded, but doesn't work)

Any thoughts?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

森林散布 2024-11-15 11:28:20

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

但就我对 .live 的理解而言，调用 event.stopPropagation() 根本没有任何效果，因为为了使 live 工作，它会附加到窗口或文档对象，因此，它已经传播得尽可能远了。

关于隐藏菜单，

我相信您应该考虑添加透明覆盖层，与模式对话框使用的类型相同。

然后，您将绑定到覆盖层以隐藏菜单。

回复收藏 0 原文

摇划花蜜的午后 2024-11-15 11:28:20

我觉得你可以创建一个类似的类

.hide {
display:none;
}

并使用这样的toggleClass...

$("#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>

i feel you can create a class like

.hide {
display:none;
}

and use a toggleClass like this...

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

not a tested code...

here is the final code for u ...

    <!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>

回复收藏 0 原文

~没有更多了~