Jump to content

jQuery append stuff


brooke_theperson

Recommended Posts

Hey so I have this code, and I start out with my homepage on the screen. If I hover over some images they glow and the source shows up beneath them. Later, if I click the homepage button on my sidebar, it shows the homepage again. This time when I hover over the images they glow, but don't show the image source. Is there something wrong with this code? Please help

 

 

<script>$(document).ready(function(){    $('.homepage').click(function(){        $('.body').empty();        $('.body').append("<div class = 'homepageappend'>You have the ability to hack into the school computer system. You can change people's grades. Would you change your own? Why or why not? What if you could change the grade for a basketball player who has a scholarship to play for a big university?<img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC' class = 'aimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOyg8Kshr-w4NSa_mTmCbKhmGP6sZRK3Dp8HfOXMk_gk8OhwBmkw' class = 'bimg'></img><img src = 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjWRNFkzImlS4mz8J7bBefmHvNmNuRTd7Oe7gMcvVS7xDm0U70' class = 'cimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRcOIwNJ1mj627ScV38Dkz_jHFHyFz9IKBa0Lnm611bUBWp_wQ' class = 'dimg'></img></div>");        $('img').mouseenter(function(){            $(this).css('border', '2px solid yellow');        });        $('img').mouseleave(function(){            $(this).css('border', '2px solid black');        });        $('.aimg').mouseenter(function(){            $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>");        });        $('.aimg').mouseleave(function(){            $('.imagesource').empty();        });        $('.bimg').mouseenter(function(){            $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>");        });        $('.bimg').mouseleave(function(){            $('.imagesource').empty();        });        $('.cimg').mouseenter(function(){            $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>");        });        $('.cimg').mouseleave(function(){            $('.imagesource').empty();        });        $('.dimg').mouseenter(function(){            $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>");        });        $('.dimg').mouseleave(function(){            $('.imagesource').empty();        });    });    $('img').mouseenter(function(){        $(this).css('border', '2px solid yellow');    });    $('img').mouseleave(function(){        $(this).css('border', '2px solid black');    });    $('.aimg').mouseenter(function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC</p>");    });    $('.aimg').mouseleave(function(){        $('.imagesource').empty();    });    $('.bimg').mouseenter(function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>");    });    $('.bimg').mouseleave(function(){        $('.imagesource').empty();    });    $('.cimg').mouseenter(function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>");    });    $('.cimg').mouseleave(function(){        $('.imagesource').empty();    });    $('.dimg').mouseenter(function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>");    });    $('.dimg').mouseleave(function(){        $('.imagesource').empty();    });});</style> <body>    <div class = 'page'>        <div class = 'header'>Hacking the School Computer System</div>        <div class = 'sidebar'>            <button class = 'homepage'>Homepage</button>            <button class = 'page2'>Page 2</button>            <button class = 'page3'>Page 3</button>            <button class = 'page4'>Page 4</button>        </div>        <div class = 'body'>            <div class = 'homepageappend'>You have the ability to hack into the school computer system. You can change people's grades. Would you change your own? Why or why not? What if you could change the grade for a basketball player who has a scholarship to play for a big university?<img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC' class = 'aimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOyg8Kshr-w4NSa_mTmCbKhmGP6sZRK3Dp8HfOXMk_gk8OhwBmkw' class = 'bimg'></img><img src = 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjWRNFkzImlS4mz8J7bBefmHvNmNuRTd7Oe7gMcvVS7xDm0U70' class = 'cimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRcOIwNJ1mj627ScV38Dkz_jHFHyFz9IKBa0Lnm611bUBWp_wQ' class = 'dimg'></img></div>            <div class = 'imagesource'></div>        </div>        <div class = 'footer'>Created by Brooke Simmerman</div>    </div></body>
Link to comment
Share on other sites

It applies hover effects to elements that exist after page load, you are removing these completely and replacing these, this is the problem the original elements do not exist with this hover effect applied anymore. you have to use jquery .on() http://www.w3schools.com/jquery/event_on.asp, which applies the hover effect to JavaScript created content as well.

Link to comment
Share on other sites

Is this right, or should I be using the .on() somewhere else, because it still isn't working?

 

        $('.aimg').on('mouseenter', function(){            $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC</p>");        });        $('.aimg').on('mouseleave', function(){            $('.imagesource').empty();        });
Link to comment
Share on other sites

Everthing that is removed and recreated using js, must use .on(). The .on() target selector MUST always exist, in this instance you should be using '.body' as only its content is removed, then you target specific js created child elements, for example

$('.body').on('mouseenter', '.aimg', function(){...});
Link to comment
Share on other sites

So I changed my code to this, and it still doesn't work?

 

 

    $('.body').on('mouseenter', '.aimg', function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC</p>");    });    $('.body').on('mouseleave', '.aimg', function(){        $('.imagesource').empty();    });    $('.body').on('mouseenter', '.bimg', function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOyg8Kshr-w4NSa_mTmCbKhmGP6sZRK3Dp8HfOXMk_gk8OhwBmkw</p>");    });    $('.body').on('mouseleave', '.bimg', function(){        $('.imagesource').empty();    });    $('.body').on('mouseenter', '.cimg', function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjWRNFkzImlS4mz8J7bBefmHvNmNuRTd7Oe7gMcvVS7xDm0U70</p>");    });    $('.body').on('mouseleave', '.cimg', function(){        $('.imagesource').empty();    });    $('.body').on('mouseenter', '.dimg', function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRcOIwNJ1mj627ScV38Dkz_jHFHyFz9IKBa0Lnm611bUBWp_wQ</p>");    });    $('.body').on('mouseleave', '.dimg', function(){        $('.imagesource').empty();    });
Link to comment
Share on other sites

You, you div, whats the most important element required to show image sources, remember you have removed all from .body, and replaced everything except........

 

Edit: also there is no img closing tag '</img>' html is <img src="whatever.jpg" alt="" >if you were using xhtml it would be <img src="whatever.jpg" alt="" />

Edited by dsonesuk
Link to comment
Share on other sites

Thank you so much for all of your help. The whole time I was thinking of the '.body' div as the 'homepageappend' div, when really it is the larger div in which everything is nested. Also, thanks for making me figure it out with hints. Really helped.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...