Jquery Scripts stop working after infinite scroll loads new pages on tumblr

Question

I have paul irish's infinite scroll plugin running, and I also have a script that shows a dropdown div on my individual posts when I hover on them, however, the dropdown is messed up after infinite scroll has loaded the first set of posts.

My dropdown code looks like this:

<script type="text/javascript">
    $(function() {
        $('.entry').hover(function() { 
            $(this).find('.notes').slideToggle(125); 
        });
    });        
</script>

I know I have to call it back after infinite scroll loads, so I added it to my infinite scroll plugin like this:

    <script type="text/javascript">
        $(document).ready(function(){
            $('#content').infinitescroll({ 
                navSelector : "div.navigation",
                nextSelector : ".navigation a#next",
                itemSelector : ".entry", 
                bufferPx : 50,
                animate  : 'true',
                extraScrollPx: 150,    
                loading: {
                    finished: undefined,
                    finishedMsg: "Congratulations, you've reached the end of the internet.",
                    img: "http://static.tumblr.com/8je4mhi/aLbmpfjp5/1.gif",
                    msg: null,
                    msgText: "",
                    selector: null,
                    speed: 'slow',
                    start: undefined
                },
            },function(newElements){                    
                  $('.entry').hover(function() { 
                      $(this).find('.notes').slideToggle(125); 
                   });
            });
        });
    </script>

But that messes it up. It makes the first set of posts visible by default, and hidden on hover, and the next set of posts afterwards are hidden, but do not stay shown when toggled.

I have my example site here if it helps: http://test-theme-one.tumblr.com

And my full html markup here if that helps: http://pastebin.com/c1N37r6U

Perhaps someone can point out where I went wrong?

Answer 1

You'll want to utilize jQuery's on() function.

Simply change your initial code to:

$('#content').on('hover', '.entry', function () {
  $(this).find('.notes').slideToggle(125);
});

...and remove the hover function in your infinite scroll callback.

More information can be found here: http://api.jquery.com/on/