jquery懸停事件沒有解僱？

我在爲我的網站寫的一些jQuery代碼時遇到了一些麻煩。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代表主頁上的一個文本框，其文本匹配t他是當前位於傳送帶前面的傳送帶，或者是由當前代碼中的類別確定的「當前」圖像。左右按鈕（id的left-but和right-but）都觸發正確的事件序列;點擊leftRotation和rightRotation事件激發，這會導致當前，左旋和右旋的類轉換爲新的當前，左側和右側圖像，並且氣泡中的文本發生更改。但是，當我嘗試將相同方法附加到旋轉木馬中的圖像時，點擊會觸發該方法最初附加的圖像，並且只會觸發該圖像;即使課程改變了，它也不會在其他圖像上開火。

如果該類所連接的節點將要更改，最好不要附加基於事件的特定類的事件？什麼是更好的方式讓這個事件發生？我已經爲此擱置了2天，真的可以用一些幫助來解決問題。

來源

2012-07-17 Ezra_Bender

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

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

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

如果你的元素注入到DOM，那麼你就需要有事件處理程序後調用元素已創建：

「事件處理程序僅綁定到當前選定的元素;它們必須在代碼調用.on（）時存在於頁面上。爲確保元素存在且可以選擇，請在文檔就緒處理程序中爲頁面上HTML標記中的元素執行事件綁定。如果將新的HTML注入頁面，請在將新的HTML放入頁面後選擇元素並附加事件處理程序。或者，使用委託事件附加事件處理程序，如下所述。「

來源

2012-07-17 15:52:35

jquery懸停事件沒有解僱？

回答

相關問題