Question

我有一个非常简单的div，里面有一个图像：

<div class="stack4">
    <img src="images/002m.jpg" width=200>
</div>

当您将鼠标悬停在图像上时，这是一个非常简单的Jquery函数：

$(function () { 
   $('.stack4>img').hover(function(){
   prompt('hello');
   });
});

一切正常。但是，我正在尝试向页面添加其他内容，因此在第一个div结束后直接放入以下HTML：

<div id="menucontainer" class="menuContainer">
    <div id="menu" class="menuContent">
        <img src="images/003m.jpg" />
        <img src="images/004m.jpg" />
    </div>
</div>

添加后，jquery提示符不再有效。为什么添加anothing div会破坏我现有的javascript命令？

Answer 1

页面中必须存在导致失败的脚本错误。或者你的新html以某种方式引入一个覆盖你的stack4图像的不可见元素的可能性非常小。如果你能提供一个链接，有人可以为你调试它。

Answer 2

它因为选择器不再匹配任何元素而中断（因为类选择器.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');
   });
});

添加额外的Div break现有的Jquery代码

2 个答案: