`load() '를 사용하여 페이지를 다시로드 한 후에`hover()`를 사용하여 바인딩 된 이벤트가 발생하지 않습니다.

Question

두 가지 스크립트가 있습니다. 하나는 AJAXing 효과 용 탐색 스크립트이고 다른 하나는 호버 효과입니다. 네비게이션을 변경 코드가 실행되면

<!--Band Images-->  
    <script type="text/javascript"> 
     $(document).ready(function(band) { 

      var name = ""; 

      $(".home-roll-box").hover(function() { 
       name = $(this).attr("id"); 
       $("#image-" + name).stop().show().animate({ 
        opacity: 1 
       }); 
      }, function() { 
       name = $(this).attr("id"); 
       $("#image-" + name).stop().animate({ 
        opacity: 0 
       }); 
      }); 
     }); 
    </script> 
    <!--/Band Images--> 

    <!--Navigation--> 
    <script type="text/javascript"> 
     $.ajaxSetup({ 
      cache: false 
     }); 

     $('ul.navigation li a').click(function(nav) { 
      $('ul.navigation li.page_item.current_page_item').removeClass('current_page_item'); 
      $('ul.navigation li.page_item a.active').removeClass('active'); 
      $('#content-wrap').animate({ 
       top: "-2000px" 
      }, 1000); 

      var targetPage = $(this).attr('href'); 
      targetPage += " #content"; 

      setTimeout(function() { 
       $('#content-wrap').load(targetPage, function() { 
        $('#content-wrap').animate({ 
         top: "0px" 
        }, 1000); 
       }); 
      }); 
      $(this).addClass('active'); 
      nav.preventDefault(); 
     }); 
    </script> 
<!--/Navigation--> 

, 다른 코드 (hover()를 이용한 대역 이미지 바인딩 이벤트 핸들러)을 실행하지 못한다.

의견이 있으십니까?

Answer 1

.home-roll-box 요소가 포함 된 DOM 부분을 다시로드하는 경우 load 호출로 삽입 된 새 요소에 이벤트 핸들러가 바인딩되지 않습니다.

hover은 배경으로 bind을 사용합니다. 핸들러는 현재 DOM에있는 요소에만 바인딩됩니다. 앞으로의 요소는 이 아니며에는 바인딩 된 핸들러가 있습니다. 대신 live을 사용하십시오. 셀렉터와 일치하는 현재 및 미래의 모든 요소에 핸들러를 바인드합니다 (바인드 이벤트 핸들러 인 jquery 세트를 완료하려면 delegate을 참조해야합니다).

$(".home-roll-box").live('mouseenter', function() { 
    name = $(this).attr("id"); 
    $("#image-" + name).stop().show().animate({ 
     opacity: 1 
    }); 
}).live('mouseleave', function() { 
    name = $(this).attr("id"); 
    $("#image-" + name).stop().animate({ 
     opacity: 0 
    }); 
}); 

Answer 2

@Matt에게 감사드립니다. 그러나 코드에 약간의 오류가있었습니다.

완전 다음과 같이 작동 :

<!--Band Images-->  
    <script type="text/javascript"> 
    $(document).ready(function() { 

      var name = ""; 

       $(".home-roll-box").live('mouseenter', function() { 
        name = $(this).attr("id"); 
        $("#image-" + name).stop().show().animate({ 
         opacity: 1 
        }); 
       }).live('mouseleave', function() { 
        name = $(this).attr("id"); 
        $("#image-" + name).stop().animate({ 
         opacity: 0 
        }); 
       }); 
      }); 
    </script> 
    <!--/Band Images--> 

    <!--Navigation--> 
    <script type="text/javascript"> 
      $.ajaxSetup ({ cache: false }); 

      $('ul.navigation li a').click(function(nav) { 
      $('ul.navigation li.page_item.current_page_item').removeClass('current_page_item'); 
      $('ul.navigation li.page_item a.active').removeClass('active'); 
      $('#content-wrap').animate({ 
       top: "-2000px" 
      }, 1000); 

       var targetPage = $(this).attr('href'); 
       targetPage += " #content"; 

      setTimeout(function() { 
       $('#content-wrap').load(targetPage, function() { 
        $('#content-wrap').animate({ 
         top: "0px" 
        }, 1000); 
       }); 
      }); 
      $(this).addClass('active'); 
      nav.preventDefault(); 
     }); 
    </script> 
<!--/Navigation-->