Question

我正在开发一个简单的RSS聚合器站点，它基本上解析了一堆RSS源并在一系列框中显示它们。我正在使用RSS插件ZRSSFEED。

您可以在此处查看该网站的实时版本：http://vitaminjdesign.com/adrian

我遇到的问题是使用jquery来选择插件生成的DOM对象。更具体地说，当您使用以下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);
        });
    });

由于某种原因，此jquery将无法与页面上的锚点一起使用。该插件使用jquery脚本生成a标签，该脚本位于我的HTML文档中的此脚本之上。我似乎无法弄清楚为什么这不起作用！我已经尝试了各种jquery片段，它们可以处理页面的其他元素，但是插件生成的内容似乎并没有受到任何jquery的影响。帮助！

Answer 1

这不起作用，因为自首次呈现页面以来DOM已更改，因此您需要使用live()方法。它允许生成的元素仍然是已有的JQuery函数的目标。 http://api.jquery.com/live/

Answer 2

您应该使用live()或delegate()方法将事件绑定到初始渲染后添加到DOM的元素。

Answer 3

如果您只需要Feed的链接以附加事件，您还可以使用zRSSFeed的回调函数在Feed加载后应用它们。

例如：

$(document).ready(function () {
    $('#test').rssfeed('http://feeds.bbc.co.uk/iplayer/highlights/tv/list',{}, function(e) {

        $(e).find('div.rssBody 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);
        });

    });
});

Jquery不会对插件生成的html标签起作用

3 个答案: