Question

I am developing a simple RSS aggregator site that basically parses a bunch of RSS feeds and displays them in a series of boxes. I am using the RSS plugin, ZRSSFEED.

You can see a live version of the site here: http://vitaminjdesign.com/adrian

The problem I am having is using jquery to select the DOM objects generated by the plugin. TO be more specific, I am trying to display social icons next to the anchor link when you hover over any link on the page using the following jquery:

$(document).ready(function(){

        $('a').hover(function(){
            $('<a href="#"><img src="images/facebook.gif" class="facebook" alt="facebook"></a>').appendTo(this).fadeIn(500);
            $('<a href="#"><img src="images/twitter.gif" class="twitter" alt="twitter"></a>').appendTo(this).fadeIn(500);

        }, function(){
            $('a').find('.facebook,.twitter').stop().fadeOut(500);
        });
    });

For some reason, this jquery will not work with the anchors on the page. The plugin generates the a tags using a jquery script that is placed above this script in my HTML document. I cant seem to figure out why this isnt working!!! I have tried various jquery snippets that work on other elements of the page, but the plugin generated content doesn’t seem to be affected by any jquery. HELP!

Answer 1

This doesn’t work because the DOM has changed since the page was first rendered, so you’ll need to use the live() method. It allows for generated elements to still be targeted by already-existing JQuery functions. http://api.jquery.com/live/