Функция зависания jQuery не работает в цикле BxSlider - PullRequest
Новая
       18

Функция зависания jQuery не работает в цикле BxSlider

2 голосов
/ 21 декабря 2011

Привет, ребята. У меня немного странная проблема, и в основном на этой странице:

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

и НTML здесь 

<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>

1 Ответ

3 голосов
/ 21 декабря 2011

У меня такое ощущение, что ползунок создает больше элементов после того, как вы сделаете начальную привязку события mouseover. Поскольку вы связываете, используя .mouseover(), только элементы, которые существуют в то время, когда вы связываете , вызовут событие.

Если ползунок добавляет больше после привязки события live, то исправит вашу проблему. Вместо привязки к элементам, существующим на момент привязки, он делает плюс все будущие элементы, соответствующие селектору: 

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