Question

I’m working on a wordpress site which display articles using AJAX. I added some jquery code in the success callback. One of my needs is to display an image on mouse over. All my code works except the mouse over effect.

So this is my ajax function :

function loadArticle(pageNumber, loop, term){    
    $.ajax({
        url: ajax_var.url,
        type:'POST',
        data: someData, 
        success: function(html){
            // This will be the div where our content will be loaded
            $("#content").append(html);    

            // Zoom box
            $('img.static').hide();
            $(".ad-preview").live({
                mouseover: function() {
                    $(this).find('img.static').stop().fadeIn();
                },
                mouseout: function() {
                    $(this).find('img.static').stop().fadeOut();
                }
            });

            //  Other stuff...
        });

        return false;
    }

});

and the HTML :

<div class="ad-preview">
    <a target="_blank" href="">
        <img src="img/zoom.png" /></a>            
    </a>
</div>

What is the good way to implement this effect ?

Answer 1

.live is an active listener replaced by .on

You would place this outside the ajax call, at the base level in js – so in other words, not inside a document.ready call or inside other functions. It will work on dom elements loaded in via ajax.