我有这段代码工作得很好,但是一旦我刷新页面上的一个div,代码中断,并且.item_control_box不再隐藏,我想我必须重写这段代码以使用。live,但我不确定如何。
$(document).ready(function() {
$(".item_control_box").hide();
jQuery('.each_item_container').hover(function() {
jQuery(this).find('.item_control_box').show()
}, function() {
jQuery(this).find('.item_control_box').hide();
});
});
谢谢!
您是否通过AJAX动态重新加载您的div ?只是好奇。下面是我看到的:
当前js代码将在渲染文档时运行
$(document).ready(function() {
$(".item_control_box").hide();
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
这将隐藏所有已经存在的item_control_box类的CURRENT元素
jQuery('.each_item_container').hover(function() {
jQuery(this).find('.item_control_box').show()
}, function() {
jQuery(this).find('.item_control_box').hide();
});
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
用类each_item_container将悬停事件处理程序附加到所有当前元素上,然后在悬停时查找item_control_box的子元素。
});
如果您通过AJAX或其他方式将新数据加载到div中,则需要确保两件事:
1) item_control_box元素不首先显示。你可以通过简单的style="display:none;"
2)确保悬停事件被分配给。each_item_container。这需要通过实时方法jQuery('.each_item_container')来实现。生活("徘徊",函数()……@PeterStuart描述
最后但并非最不重要的是,不确定您使用的是哪个版本的jquery,但在1.7+ live()方法是不赞成的。请使用on()方法。这里是供参考的链接:http://api.jquery.com/live/
您可以更改:
jQuery('.each_item_container').hover(function() {
jQuery('.each_item_container').live('hover', function() {
回答你上面的评论你的HTML应该只是好的,只要你有一个div类称为"each_item_container"。当你将鼠标悬停在它上面时,它现在应该改变你的背景颜色:)
让我知道如果它不工作:)