CODEWITHSUNDEEP
javascriptjqueryhtml
thegreatt
thegreatt

Reputation: 1419

Adding Additional Div breaks Existing Jquery Code

I have a very simple div with an image inside:

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

And a very simple Jquery function for when you hover over the image:

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

This all works fine. However, I'm trying to add additional content to the page, and so put the following HTML directly after the end of the first div:

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

After I add this, the jquery prompt no longer works. Why would adding anothing div break my existing javascript command like that?

Upvotes: 1

Views: 154

Answers (2)

PatrikAkerstrand
PatrikAkerstrand

Reputation: 45721

It breaks because the selector no longer matches any elements (because the class selector .stack4 does no longer match any element).

<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');
   });
});

If you look at your javascript, it will:

  1. match any child image of an element with class name stack4
  2. Add a hover listener to each image
  3. Display a prompt on hover.

IF you look at your updated DOM structure, class stack4 no longer exists. To make it work again, you have to replace this selector with your new equivalent, which would be the div with id=menu and class=menuContent.

Now, depending on your needs, you can target either #menu>img or .menuContent>img. If you go with the first one, the javascript fragment will only work for a single menu, with the id of menu. However, if you choose the second approach, any content with the class menuContent will have this functionality. So I'd go with:

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

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39872

There has to be a script error in the page that is causing a failure. Or there is a very slight chance that your new html in some way introduces an invisible element that covers your stack4 image. If you can provide a link somebody could debug it for you.

Upvotes: 1

Related Questions