함께있을 때 jquery hover 및 ajax 페이지 매김에 오류가 발생했습니다.

Question

감사합니다. 내 워드 프레스 사이트에 몇 가지 코드가 있는데, 첫 번째 이미지는 색상, 기사 제목 및 프로젝트 링크로 연결되는 오버레이를 추가합니다. 두 번째 코드는 jQuery를 사용하여 ajax 페이지 매김을 추가합니다.

문제는 내가 이미지가있는 프로젝트와 jquery 오버레이가 완벽하지만, 아약스 페이지 매김을 호출하는 이전 프로젝트 링크를 클릭하면 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); }); 
    }); 

Answer 1

나는 같은 날에 해결책을 찾았고 @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); }); 
    }); 

Answer 2

You can post answers to your own question.

그리고 호버에는 live()^Doc을 사용해야합니다. 아마도 페이지 번호 매기기가 새 portfolio-thumbs li으로로드 될 것입니다.

live()이 없으면 이러한 새로운 li에는 이벤트가 연결되지 않습니다 (단, 페이지 지정 이벤트마다 jQuery('ul.portfolio-thumbs li').hover을 다시 호출하지 않는 한).
라이브가 더 쉽고 엘리먼트에 첨부 된 동일한 이벤트 리스너의 사본이 여러 개있는 것을 피할 수 있습니다.

그리고 예, 동일한 페이지에서 live() 건 이상의 전화를 문제없이 사용할 수 있습니다.