Question

所以我才注意到这一点。基本上我的代码在调整窗口大小时会将一堆图像附加到最后，这样你就可以得到一连串的图像，而不是一个会破坏设计的突然结束。所以我可能会添加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'});
});

知道如何解决这个问题吗？

Answer 1

你有哪个版本的jQuery？如果是1.7然后查看on方法：http://api.jquery.com/on/如果之前再看看实时：http://api.jquery.com/live/

Answer 2

你是对的，你添加到页面的图像没有悬停效果。这是因为事件处理程序仅附加到调用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元素，它都会被触发。

附加图像不会有悬停效果

2 个答案: