jQuery的懸停功能不工作「BxSlider」循環

Question

嗨，大家好我有一個稍微奇怪的問題，基本上在此頁上：

http://www.carbondelight.co.uk

我有6張/產品上搭載了一個無限循環BxSlider（http://bxslider.com/），這一點很簡單。

我已經那麼在jQuery的編碼，當你將鼠標懸停在相應的產品圖像顯示產品名稱的函數。

我遇到的問題是，在徘徊僅適用於每一個循環，不跨越到下一個循環。例如，如果你看一下前面提到的頁面，你會注意到循環中的最後一張圖像是一輛紅色汽車的兩個後排座位，如果你嘗試在該圖像和它旁邊的船形圖像之間懸停，你會沒有改變產品名稱。但是如果你完全移動到下一個循環中，所有的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> 

Answer 1

我有一種感覺，你做的mouseover事件的初始綁定後的滑塊創造更多的元素。由於您使用.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'); 
});