Ошибка с jquery hover и ajax pagination, когда они вместе - PullRequest
Новая
       20

Ошибка с jquery hover и ajax pagination, когда они вместе

0 голосов
/ 05 августа 2011

Спасибо за чтение. У меня есть несколько кодов на моем WordPress сайте, первый добавляет наложение поверх изображения с цветом, заголовком статьи и ссылкой для перехода в проект. Второй код добавляет нумерацию страниц с помощью jQuery.

Дело в том, что мои проекты с изображениями и оверлеем jquery превосходны, но когда они нажимают на ссылку предыдущих проектов, которая вызывает пагинацию ajax, оверлей jquery перестает работать.

Я пробовал разные варианты, но, возможно, я не на правильном пути, чтобы решить это. У кого-нибудь есть подсказка?

Спасибо заранее.

Коды: 

    // PORTFOLIO HOVER EFFECT   

 jQuery('ul.portfolio-thumbs li').hover(function(){  
         jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});  
     }, function() {  
        jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});  
    });  


    // POSTS NAVIGATION     
    jQuery('#posts-navigation a').live('click', function(e){
        e.preventDefault();
        var link = jQuery(this).attr('href');
        jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
    });

Ответы [ 2 ]

2 голосов
/ 17 сентября 2011

Я нашел решение в тот же день, и @BrockAdams помог мне с сомнениями. Я помещаю сюда код, потому что он может быть полезен для кого-то. 

jQuery('ul.portfolio-thumbs li').live('hover', function(event){  
    if (event.type == 'mouseenter') {
          jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});  
        } else {  
         jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});  
         }
     });  


jQuery('#posts-navigation a').live('click', function(e){
        e.preventDefault();
        var link = jQuery(this).attr('href');
        jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
    });
0 голосов
/ 05 августа 2011

Вы можете оставить ответы на свой вопрос .

И вам нужно было использовать live() Doc при наведении, потому что разбиение на страницы предположительно загружается в новых portfolio-thumbs li с.

Без live() эти новые li не будут иметь прикрепленных к ним событий (если только вы не вызывали jQuery('ul.portfolio-thumbs li').hover после каждого события нумерации страниц).
Вживую становится проще и позволяет избежать ловушек, связанных с несколькими копиями одного и того же прослушивателя событий, прикрепленного к элементу.

И, да, вы можете без проблем использовать оба вызова live() на одной и той же странице.

...