添加其他事业部断裂现有的jQuery代码

我有内部的图像很简单的div：添加其他事业部断裂现有的jQuery代码

<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的提示不再起作用。为什么要添加anothing div会破坏我现有的javascript命令？

来源

2011-09-04 thegreatt

它为我工作[的jsfiddle（http://jsfiddle.net/6EtF2/1/） –

似乎工作完全没对我来说：http://jsfiddle.net/9Sk8h/ –

你有没有尝试正确格式化第一个img？没有结束标签。 –

在导致失败的页面中必须有脚本错误。或者你的新html在某种程度上引入了一个隐藏的元素来覆盖你的stack4图像，这是一个很小的机会。如果您可以提供链接，有人可以为您进行调试。

来源

2011-09-04 06:53:43 mrtsherman

你说得对 - 我检查了CSS，其中一个新的div是隐形的，覆盖了屏幕的100％。我不知道为什么我不想检查，但谢谢你的推动！ – thegreatt

+1非常微小的机会=）。很高兴你正在运行。 – mrtsherman

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

来源

2011-09-04 07:05:09 PatrikAkerstrand

添加其他事业部断裂现有的jQuery代码

回答

相关问题