Adding Additional Div breaks Existing Jquery Code

Question

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?

Have you tried properly formatting the first img? There is no closing tag. — Sang Suantak
– Sang Suantak, Commented Sep 4, 2011 at 6:58

mrtsherman · Accepted Answer · 2011-09-04 06:53:43Z

1

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.

answered Sep 4, 2011 at 6:53

mrtsherman

40k23 gold badges90 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thegreatt Over a year ago

You were right - I checked the CSS and one of the new divs was invisible and covering up 100% of the screen. I don't know why I didn't think to check, but thanks for the nudge!

PatrikAkerstrand · Accepted Answer · 2011-09-04 07:05:09Z

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:

match any child image of an element with class name stack4
Add a hover listener to each image
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');
   });
});

Collectives™ on Stack Overflow

Adding Additional Div breaks Existing Jquery Code

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related