jQuery를 호버 기능은 내가 약간 이상한 문제가, 기본적으로이 페이지에

Question

안녕 얘들 아 'BxSlider'루프 작동하지 BxSlider (http://bxslider.com/), 그 비트는 간단합니다.

그런 다음 jQuery에서 각 제품 이미지 위에 마우스를 가져갈 때 제품 이름을 표시하는 기능을 코딩했습니다.

내가 갖고있는 문제는 호버링이 각 루프에서만 작동하고 다음 루프로 넘어 가지 않는다는 것입니다. 예를 들어 앞에서 언급 한 페이지를 살펴보면 루프의 마지막 이미지가 두 개의 뒷좌석에 있음을 알 수 있습니다. 그 이미지와 보트 이미지 사이에 마우스를 가져 가면 그 이미지가 나타납니다. 제품 이름을 변경하지 마십시오. 그러나 completley를 다음 루프로 옮기면 모든 jQuery가 다시 작동합니다. 그리고 내 인생에서 나는이 문제를 해결할 수 없다. 누구든지 아이디어가 있습니까?

미리 감사드립니다.

다니엘.

코드는 여기에 있습니다.

$('.newp-hover').mouseenter(function() { 
    var imgValue = $(this).attr("name"); 
    //alert(imgValue); 
    $('.newp-pre').hide(); 
    $('.newp-name').hide(); 
    $('.' + imgValue).fadeIn('slow'); 
}); 

와 HTML 여기

<div id="new-p-con"> 
    <div class='newp-title textshadow'>NEW PRODUCTS</div><div class='newp-bt-con'><div class="newp-left-btn" id="go-prev2"></div><div class="newp-right-btn" id="go-next2"></div></div> 
    <div class="newp-img-con"> 
       <ul id="slider5"> 
         <?php 

         for ($j = 0 ; $j < $rows ; ++$j) 
         { 
          $row = mysql_fetch_row($result3); 
          $sql4 = "SELECT smlImg FROM imageTable WHERE partID='$row[0]'"; 
          $product = performQuery($sql4); 
          //displays the product images 
          echo "<li class='newp-li'><a href='prodview.php?id=$row[0]' class='newp-hover' name='$j'><img src='$image$product[0]' /></a></li>"; 
         } 
         ?> 
       </ul> 
     <div class="newp-name-con"> 
     <?php 
      //finds the first product name 
      $showyou = performQuery($sql5); 

     for ($j = 0 ; $j < $rows5 ; ++$j) 
     { 
      $row2 = mysql_fetch_row($result5); 
      //displays the first product name so a name shows when page is loaded 
      echo "<p class='none newp-name $j'>$row2[1]</p>"; 
     } 

     ?> 

     </div> 
    </div> 

난 당신이 mouseover 이벤트의 초기 바인딩을 수행 한 후 슬라이더가 더 많은 요소를 작성되는 느낌이있어

Answer 1

입니다. .mouseover()을 사용하는 바인딩이므로을 바인딩 할 때 이 존재하는 요소 만 이벤트를 트리거합니다.

live event을 바인드 한 후 슬라이더가 더 추가되면 문제가 해결됩니다.

$('.newp-hover').live('mouseenter', function() { 
    var imgValue = $(this).attr("name"); 
    //alert(imgValue); 
    $('.newp-pre').hide(); 
    $('.newp-name').hide(); 
    $('.' + imgValue).fadeIn('slow'); 
}); 

---

편집

.live()은 jQuery를 v1을 추천되지 않습니다 대신 바인딩시 기존의 요소를 결합, 그것은 플러스 미래의 모든 요소가 선택 일치하는 것으로한다. 7. 대신 델리게이트 이벤트를 사용해야합니다 :

$(documents).on('mouseenter', '.newp-hover', function() { 
    var imgValue = $(this).attr("name"); 
    //alert(imgValue); 
    $('.newp-pre').hide(); 
    $('.newp-name').hide(); 
    $('.' + imgValue).fadeIn('slow'); 
});