Question

我在为我的网站编写的一些jquery代码时遇到了一些麻烦。

我正在使用cloudcarousel插件在我正在创建的网站的主页上播放图像轮播。旋转木马的html代码如下：

    <div id="carousel" style="width:100%; height:100%;overflow:scroll;">
                <img id="sample1image"      alt="sample 1"   class = "cloudcarousel current" src="img/homepage/random1.png" />
                <img id="sample2image"       alt= "sample 2" class = "cloudcarousel left leftrotate" src="img/homepage/random2.png"/>
                <img id="sample3image"     alt = "sample 3" class = "cloudcarousel" src = "img/homepage/random3.png" />
                <img id="sample4image"          alt = "sample 4" class = "cloudcarousel" src = "img/homepage/random4.png" />
                <img id="sample5image"       alt="sample 5" class = "cloudcarousel" src = "img/homepage/random5.png" />
                <img id="sample6image" alt="sample 6"  class = "cloudcarousel right rightrotate" src = "img/homepage/random6.png" />


                <input class = "leftrotate" id="left-but"  type="button" value="" />
                <input class = "rightrotate" id="right-but" type="button" value="" />

                <div class="bubble" id="homepagebubble">
                    <span id="bubbleinnercontainer"><a id="bubbletext" href="#">Sample 1</a></span>
                </div>
            </div>

我在jquery中使用以下代码初始化了我的代码：

        $(document).ready(function() {
            $("#carousel").CloudCarousel({
                xPos : 500,
                yPos : 100,
                xRadius : 400,
                yRadius : -8,
                minScale : 0.8,
                speed : 0.3,
                bringToFront : true,
                buttonLeft : $("input.leftrotate"),
                buttonRight : $("input.rightrotate"),
                altBox : $("#alt-text"),
                titleBox : $("#title-text")
            });
           $('.leftrotate').click(leftRotation);

            $('.rightrotate').click(rightRotation);
         });

这是我的leftRotation方法：

    function leftRotation() {
       $('.bubble').css('display', 'none');

       var nextimage = "";
       var rightimage = "";
       var leftimage = "";
       var nextimageindex = $(currentimage).prev().index();

       rightimageindex = $('.right').index();
       leftimageindex = $('.left').index();
       //increment the indexes
       rightimageindex -= 1;
leftimageindex -= 1;

if (rightimageindex < 0) {
    rightimageindex = rightimageindex + 6;
    //if its out of bounds, then bring it back in range
}
if (leftimageindex < 0) {
    leftimageindex = leftimageindex + 6;
}

rightimage = $('.cloudcarousel').eq(rightimageindex);
leftimage = $('.cloudcarousel').eq(leftimageindex);
$('.right').removeClass('right rightrotate');
$('.left').removeClass('left leftrotate');

rightimage.addClass('right rightrotate');
leftimage.addClass('left leftrotate');


var currentimage = $('.current').attr('id');
currentimage = "#" + currentimage;
if ($(currentimage).prev().index() == -1)//if this is the first image
{
    nextimage = $('.cloudcarousel').eq(5);
    $(currentimage).removeClass('current');
    nextimage.addClass('current');
    $('#bubbletext').text(nextimage.attr('alt'));
} else {

    nextimage = $(currentimage).prev();
    $(currentimage).removeClass('current');
    nextimage.addClass('current');
    $('#bubbletext').text(nextimage.attr('alt'));
}

$('.bubble').fadeIn('slow');

}

带有“bubble”类的div表示主页上的一个框，其文本与旋转木马前面的当前轮播匹配，或“当前”图像，由代码中的类当前确定。左右按钮（id的左 - 但 - 右 - 但）都触发正确的事件序列;单击leftRotation和rightRotation事件fire，这将导致current，leftrotate和rightrotate的类转换为新的当前，左图和右图，并且气泡中的文本发生更改。但是，当我尝试将相同的方法附加到轮播中的图像时，单击会触发该方法最初附加到的图像，并且仅触发该图像;即使班级已经改变，它也不会触发其他图像。

如果附加类的节点要更改，是否最好不根据事件的特定类附加事件？让这个事件发生的更好方法是什么？我已经被困在这2天了，并且可以真正使用一些帮助来提出解决方案。

Answer 1

考虑使用$(selector).on()代替$(selector).click()：

// pass in e for e.preventDefault();
$('.leftrotate').on('click', function(e) { leftRotation(e) }); 
$('.rightrotate').on('click', function(e) { rightRotation(e) });

.on()的jQuery文档：http://api.jquery.com/on/

如果要将元素注入DOM，那么在创建元素之后，您需要使用名为的事件处理程序：

“事件处理程序仅绑定到当前选定的元素;它们必须存在于代码调用.on（）时页面上。为确保元素存在且可以选择，请在内部执行事件绑定页面上HTML标记中元素的文档就绪处理程序。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委派事件附加一个事件处理程序，如下所述。“

Jquery悬停事件没有解雇？

1 个答案: