附加的圖像不會有懸停效果

所以我只注意到了這一點。基本上，當窗口大小調整時，我的代碼將一些圖像附加到最後，以便您擁有連續的圖像線，而不是突然結束，這會使設計陷入混亂。所以我可能會添加4張圖片，或2張，具體取決於屏幕大小。附加的圖像不會有懸停效果

function imageNumber() { 

    $('#images br').remove(); 
    $('.appended').remove(); 

    var windowWidth = $(window).width(); 


    var numberOfImages = $("#images img").length; 
    var numberOfImagesPerRow = Math.ceil(windowWidth/imageWidth); 

    $('#images img:nth-child('+numberOfImagesPerRow+'n)').after('<br />') 
    $('#images br:last-child').remove(); 

    var nuLineBreaks = $('br').length + 1; 

    if(numberOfImages % numberOfImagesPerRow != 0) { 

     var numberOnRow = Math.round((1 - (numberOfImages/numberOfImagesPerRow % 1)) * numberOfImagesPerRow); 
     var number = 0; 

     while(number <= numberOnRow) { 

      $('.i'+number).clone().appendTo($('#images')).attr('class', 'appended'); 
      ++number; 

     } 

    } 

}

我注意到附加的圖像沒有動畫。

$('#images img').hover(function() { 
    $(this).css({'width' : '250px', 'height' : '250px'}); 
}, 
function() { 
    $(this).css({'width' : '200px', 'height' : '200px'}); 
});

任何想法如何解決這個問題？

來源

2012-01-10 Johnny

你是對的，你添加到頁面的圖像沒有懸停效果。這是因爲事件處理程序僅附加到在調用hover()時發現的元素jQuery。新元素（如由clone()創建的元素）沒有附加任何事件處理程序。

對您而言，您可能要使用clone(true)，其中tells jQuery to copy event handlers and data as well。

另一種選擇是使用on()附加懸停事件到父元素（#images），並指定一個選擇器，以過濾應該觸發的情況下，像這樣的子元素：

$("#images").on("mouseover", "img", function() { 
    // mouseover code 
}).on("mouseleave", "img", function() { 
    // mouseleave code 
});

在這種情況下，因爲事件處理程序被附加到#images，它將被觸發，無論你將來最終添加到它的什麼img元素。

來源

2012-01-10 22:36:42

你有哪個版本的jQuery？如果1.7然後看看方法：http://api.jquery.com/on/如果更早，然後看直播：http://api.jquery.com/live/

來源

2012-01-10 21:53:16

感謝您的幫助！但下面的那個人更有意思：3 – Johnny 2012-01-10 22:50:08

附加的圖像不會有懸停效果

回答

相關問題