Jquery не будет работать на HTML-теги, созданные плагином

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 не будет работать с якорями на странице. Плагин генерирует теги a, используя скрипт jquery, который находится над этим скриптом в моем HTML-документе. Я не могу понять, почему это не работает !!! Я пробовал различные фрагменты jquery, которые работают с другими элементами страницы, но контент, сгенерированный плагином, похоже, не подвержен влиянию jquery. ПОМОГИТЕ!

Answer 1

Это не работает, потому что DOM изменился с момента первого отображения страницы, поэтому вам нужно использовать метод live(). Это позволяет создавать сгенерированные элементы для уже существующих функций JQuery. http://api.jquery.com/live/

Answer 2

Если вам требуется, чтобы ссылки канала были только прикреплены к событиям, вы также можете использовать функцию обратного вызова zRSSFeed, чтобы применить их после загрузки канала.

Например:

$(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);
        });

    });
});

Answer 3

Вы должны использовать методы live () или делегат () для привязки событий к элементам, которые добавляются в DOM после первоначального рендеринга.