Добавленные изображения не будут иметь эффектов при наведении - PullRequest
Новая
       21

Добавленные изображения не будут иметь эффектов при наведении

1 голос
/ 11 января 2012

Так что я только что заметил это.По сути, мой код добавляет несколько изображений в конец при изменении размера окна, так что у вас есть непрерывная линия изображений, а не резкий конец, который мешал бы дизайну.Поэтому я мог бы добавить 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'});
});

Любая идея, как исправитьэто?

Ответы [ 2 ]

3 голосов
/ 11 января 2012

Какая версия jQuery у вас есть?Если 1.7, тогда посмотрите на метод on: http://api.jquery.com/on/, если раньше, то посмотрите на live: http://api.jquery.com/live/

1 голос
/ 11 января 2012

Вы правы, изображения, которые вы добавляете на страницу, не имеют эффектов наведения. Это связано с тем, что обработчик событий присоединяется только к элементам, найденным во время вызова hover(). Новые элементы (например, созданные clone()) не имеют прикрепленных обработчиков событий.

В вашем случае вы можете использовать clone(true), что указывает jQuery копировать обработчики событий и данные, а также .

Другой вариант - прикрепить событие наведения к родительскому элементу (#images), используя on(), и указать селектор для фильтрации дочерних элементов, которые должны вызывать событие, например: 

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

В этом случае, поскольку обработчик событий присоединен к # images , он будет срабатывать независимо от того, какие элементы img вы добавите в него в будущем.

...