Свойства CSS не применяются к добавленным элементам в бесконечной прокрутке jQuery

Я использую Drupal Views для загрузки содержимого с помощью этот скрипт бесконечной прокрутки в сетку элементов в стиле каменной кладки.

Он прокручивается бесконечно, но добавленные элементы не сохраняют свойства CSS исходных элементов. Я не совсем уверен, почему это происходит.

Кроме того, я использую эффект наведения jQuery, чтобы «плавать» поверх моих изображений. Это довольно простой код. Я не могу себе представить, что это как-то повлияет на эту проблему, но вот на всякий случай:

jQuery для эффекта наведения

$j('div.blog-list').on(".blog-thumbs-animate").hover(function(){
    $j("img", this).stop().animate({opacity: 0.9},{queue:false,duration:75});
    $j(".bhover", this).animate({opacity: 0.9},{queue:false,duration:75});  
}, function() {
    $j("img", this).stop().animate({opacity: 1},{queue:false,duration:75});
    $j(".bhover", this).animate({opacity: 0},{queue:false,duration:75});        
});

jQuery для каменной кладки и бесконечной прокрутки:

<script>
  (function($){

    var $container = $('.blog-list');

    $container.imagesLoaded(function($){
      $container.masonry({
        itemSelector: 'div.pmason',
        columnWidth: 320
      });
    }(jQuery));

    $container.infinitescroll({
      navSelector  : '.pager',    // selector for the paged navigation 
      nextSelector : '.pager-next a',  // selector for the NEXT link (to page 2)
      itemSelector : '.blog-list .node',     // selector for all items you'll retrieve
           animate : true,
      loading: {
          finishedMsg: 'No more pages to load.',
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );

  })(jQuery);
</script>

Редактировать: вот CSS

.blist .pmason { width:319px; margin-right:1px; margin-bottom:1px; background:#FFF !important;}
.blist .last { margin-bottom:1px !important; margin-right:1px !important; }
.blog-thumbs-animate { position:relative !important; }
.blist .bhover { opacity:0; background:#f4f4f4; width:319px; position:absolute; bottom:0; left:0; height:100% !important; }
.bhover .inside { padding:20px; }

Кто-нибудь может помочь?

Спасибо!


person Benjamin Stark    schedule 13.08.2014    source источник
comment
Где ССЦ? Или CSS означает этот эффект наведения javascript?   -  person João Mosmann    schedule 13.08.2014


Ответы (2)


Я не знаю этого плагина бесконечной прокрутки. Но похоже, что он создает новые элементы, и у этих новых элементов нет прослушивателя событий наведения.

Итак, я предлагаю вам сделать прослушиватель событий при наведении таким образом.

$j('div.blog-list').on("mouseenter",".blog-thumbs-animate", function (){

    $j("img", this).stop().animate({opacity: 0.9},{queue:false,duration:75});
    $j(".bhover", this).animate({opacity: 0.9},{queue:false,duration:75});  

}).on("mouseleave",".blog-thumbs-animate", function () {

    $j("img", this).stop().animate({opacity: 1},{queue:false,duration:75});
    $j(".bhover", this).animate({opacity: 0},{queue:false,duration:75});   

});

Разница между добавлением прослушивателя событий через метод on и методом hover заключается в том, что он добавляет прослушиватель событий не непосредственно к элементу, а к селектору. Таким образом, даже если вы создадите новые элементы, этот прослушиватель событий будет соответствовать новым элементам.

Подробнее здесь http://api.jquery.com/on/

person João Mosmann    schedule 13.08.2014
comment
Спасибо за совет! Ваш код работает, но, к сожалению, такой способ прослушивания событий не повлиял на способ отображения элементов. Но, может быть, это все равно чище, так что я могу оставить его. - person Benjamin Stark; 13.08.2014
comment
Не могли бы вы предоставить нам рабочий пример вашего кода? Если мой ответ вам чем-то помог, пожалуйста, проголосуйте. - person João Mosmann; 13.08.2014

Хорошо, я понял это. Моя проблема оказалась в HTML, который был единственным фрагментом кода, который я не смог опубликовать в своем первоначальном вопросе.

Для тех, кому любопытно, мой HTML изначально выглядел примерно так:

<div class="blog-list">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>

Какой правильный код для любой нормальной цели. Но из-за того, что бесконечная прокрутка добавляет новые элементы внутрь себя, в итоге я получил что-то вроде этого:

<div class="blog-list">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>
<div class="infinite-scroll">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>

Ру-ро. Вы видите, что здесь произошло? Бесконечная прокрутка оказалась за пределами моего класса списка блогов, хотя я указал использовать этот класс. Чтобы обойти это, я просто добавил дополнительную оболочку ВНУТРИ списка блогов, чтобы при запуске бесконечной прокрутки она сохраняла все содержимое.

Это окончательный результат, и теперь он работает так, как ожидалось!

<div class="blog-list">
<div class="inner">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>
<div class="infinite-scroll">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>
</div>

Большое спасибо тем, кто пытался мне помочь. Я очень ценю это.

person Benjamin Stark    schedule 13.08.2014