jquery .on not loading

Question

Possible Duplicate:
infinite scroll javascript already fired

When a user hovers over a div with class .item_list_image I want other divs to show, I'm trying the following but simply not working.

<script type="text/javascript">
   $("body").on("mouseenter", ".list_item_image", function () {
        {
                $(this).children(".gl_view2").show();
                $(this).children(".gl_relist").show();
        });

   $("body").on("mouseleave", ".list_item_image", function () {
       {
                $(this).children(".gl_view2").hide();
                $(this).children(".gl_relist").hide();
       });
</script>

I have been advised to use the .on method as I am using jquery infinite scroll and therefore appending the html on the shown page, with new items being added containing divs with class list_item_image

Answer 1

You missed $(document).ready, just wrap your code with

$(document).ready(function(){
    $("body").on("mouseenter", ".list_item_image", function (){
        $(this).children(".gl_view2").show();
        $(this).children(".gl_relist").show();
    })
    .on("mouseleave", ".list_item_image", function (){
       $(this).children(".gl_view2").hide();
       $(this).children(".gl_relist").hide(); 
    });
});​

Also noteice the extra { in your both functions at the top just bottom of the $("body").

Just an example.