Jquery 不适用于插件生成的 html 标签答案

【问题标题】：Jquery wont work on plugin generated html tagsJquery 不适用于插件生成的 html 标签
【发布时间】：2011-01-25 16:58:23
【问题描述】：

我正在开发一个简单的 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 无法与页面上的锚点一起使用。该插件使用放置在我的 HTML 文档中此脚本上方的 jquery 脚本生成 a 标签。我似乎无法弄清楚为什么这不起作用！！！我尝试了各种适用于页面其他元素的 jquery sn-ps，但插件生成的内容似乎不受任何 jquery 的影响。帮助！

【问题讨论】：

如果您将鼠标悬停在徽标链接上，您可以看到它有效，但其余链接则看不到

标签： jquery dom rss

【解决方案1】：

这不起作用，因为 DOM 自从页面首次呈现后发生了变化，因此您需要使用 live() 方法。它允许生成的元素仍然是已经存在的 JQuery 函数的目标。 http://api.jquery.com/live/

【讨论】：

live 是这样做的方法，但是，当您处理悬停事件时，请使用以下代码：stackoverflow.com/questions/2262480/jquery-live-hover

【解决方案2】：

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

【讨论】：

【解决方案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);
        });

    });
});

【讨论】：