添加附加的Div breaks现有Jquery代码
添加附加的Div breaks现有Jquery代码
提问于 2011-09-04 14:49:10
我有一个非常简单的div，里面有一张图片：
<div class="stack4">
<img src="images/002m.jpg" width=200>
</div>还有一个非常简单的Jquery函数，当你将鼠标悬停在图像上时：
$(function () {
$('.stack4>img').hover(function(){
prompt('hello');
});
});这一切都运行得很好。但是，我正在尝试向页面添加额外的内容，因此将以下HTML直接放在第一个div的末尾：
<div id="menucontainer" class="menuContainer">
<div id="menu" class="menuContent">
<img src="images/003m.jpg" />
<img src="images/004m.jpg" />
</div>
</div>添加此命令后，jquery提示符不再起作用。为什么添加另一个div会破坏我现有的javascript命令呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-09-04 14:53:43
页面中必须存在导致失败的脚本错误。或者，您的新html以某种方式引入了覆盖stack4图像的不可见元素的可能性很小。如果你能提供一个链接，别人就可以为你调试它。
Stack Overflow用户
发布于 2011-09-04 15:05:10
它会中断，因为选择器不再与任何元素匹配(因为类选择器.stack4不再与任何元素匹配)。
<div id="menucontainer" class="menuContainer">
<div id="menu" class="menuContent">
<img src="images/003m.jpg" />
<img src="images/004m.jpg" />
</div>
</div>
$(function () {
$('.stack4>img').hover(function(){
prompt('hello');
});
});如果您查看您的javascript，它将：
- 匹配类名为stack4
- 的元素的任何子图像为每个图像添加悬停侦听器
- 在悬停时显示提示。
如果您查看更新后的DOM结构，就会发现stack4类已不复存在。要让它再次工作，您必须用新的等价物替换此选择器，即带有id=menu和class=menuContent的div。
现在，根据您的需要，您可以针对#menu>img或.menuContent>img。如果使用第一个，javascript片段将只适用于单个菜单，其id为menu。但是，如果选择第二种方法，则类为menuContent的任何内容都将具有此功能。所以我会说：
$(function () {
$('.menuContent>img').hover(function(){
prompt('hello');
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7297801
复制相关文章
相似问题
腾讯云开发者
