jQueryのホバー機能は、私は少し奇妙な問題があり、基本的にこのページに

Question

こんにちはみんな「BxSlider」ループで動作しませんBxSlider（http://bxslider.com/）、そのビットは単純です。

次に、jQueryで、それぞれの製品イメージにマウスを合わせると製品名を表示する関数をコーディングしました。

問題は、ホバリングが各ループでのみ機能し、次のループにクロスオーバーしないことです。たとえば、前述のページを見ると、ループの最後のイメージが赤い車の2つの後部座席であることがわかります。そのイメージとその横のボートイメージの間を移動しようとすると、製品名を変更しないでください。しかし、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> 

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'); 
}); 

---

EDIT

.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'); 
});