jQuery простой эффект наведения, потерянный для добавленных элементов (бесконечная прокрутка)

Я разрабатываю тему WordPress, которая добавляет сообщения с бесконечной прокруткой и имеет простой фрагмент jQuery, чтобы скрыть/показать заголовки сообщений, когда сообщение зависает:

$('article').mouseover(function() { 
    $(this).next('h2.subtitled').show();
}).mouseout(function() {
    $(this).next('h2.subtitled').hide();
});

Таким образом, в основном за каждым сообщением («статьей») следует его заголовок («h2.subtitled»), который изначально скрыт (через display:none;) и фиксируется в нижней части браузера. Кажется, пока это работает хорошо, но как только бесконечная прокрутка загружает новые элементы:

$(function(){

  var $container = $('#main');

  $container.isotope({
    itemSelector : 'article'
  });

  // update columnWidth on window resize
    $(window).smartresize(function(){
      $container.isotope({
      });
    });

  $container.infinitescroll({
    navSelector  : '.pagination',    // selector for the paged navigation 
    nextSelector : '.pagination a.next',  // selector for the NEXT link (to page 2)
    itemSelector : 'article',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/qkKy8.gif'
      }
    },
    // call Isotope as a callback
    function( newElements ) {
      $container.isotope( 'appended', $( newElements ) ); 
    }
  );


});

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

function( newElements ) {
        $container.isotope( 'appended', $( newElements ) );

        $('article').mouseover(function() { 
                $(this).next('h2.subtitled').show();
            }).mouseout(function() {
                $(this).next('h2.subtitled').hide();
        });
    }

Что не работает, они новые элементы все равно не зависают. Кто-нибудь может помочь?

Спасибо!

РЕДАКТИРОВАТЬ: Вот основная структура HTML:

<div id="main">
    <article class="hubbub">
        //article content
    </article>
    <h2 class="subtitled">
        //h2 content
    </h2>
</div>

Ладно, извини, я понял, что проблема в другом. Пока спасибо… Как следует из этого, и бесконечная прокрутка захватывает элемент только как itemSelector, там, где нет в добавленных элементах. Итак, мне нужны элементы на фиксированном месте внизу границы. Как только я помещаю их внутрь элемента , который имеет {position: относительный;}, элементы фиксируются относительно родительского элемента в нижней части каждого элемента. Есть ли способ сохранить внутреннюю часть , но при этом зафиксировать их внизу браузера? Спасибо!


scroll jquery hover infinite
person R4ttlesnake    schedule 12.01.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Используйте делегированные события в jQuery:

JavaScript:

$('#main').on('mouseenter mouseleave', 'article', function() { 
    $(this).next('h2.subtitled').toggle();
});

HTML

<div id="main">
    <article>here is some text</article>
    <h2 class="subtitled">h2 header</h2>

    <article>article 2: here is some text</article>
    <h2 class="subtitled">article 2: h2 header</h2>
</div>

демонстрация jsFiddle

Я предполагаю, что article является классом CSS, поэтому вам нужен селектор .article. Привязывая таким образом, вам не нужно повторно запускать функцию после обновления ajax, вы прикрепляете «часы» к родительский контейнер, который затем «слушает» все вновь присоединенные дочерние элементы.

РЕДАКТИРОВАТЬ: После дальнейшего чтения вы можете используйте события mouseeneter и mouseleave, так как они имеют правильное всплывающее событие (отсутствие), иначе событие «мышь в» будет срабатывать слишком часто для ваших нужд.

person jammykam    schedule 12.01.2014
comment
К сожалению, этого решения нет. Элементы «h2.subtitled» не удаляются из .mouseout, а также функция не запускается для добавленных элементов с бесконечной прокруткой. 'статья' - это тег-элемент, а не класс, и он должен вызываться без предшествующей точки. - person R4ttlesnake; 13.01.2014
comment
Плохо, я обновил пример кода. Но вы говорите, что это все еще не работает? Вам нужно вызвать вышеуказанную функцию только один раз (сразу после var $container = $('#main') будет хорошо), а не при загрузке каждого элемента. - person jammykam; 13.01.2014
comment
@ user2355143 Я пропустил событие mouseout. Я изменил код. - person jammykam; 13.01.2014
comment
Привет, скрипт теперь работает с первыми элементами, но все еще не работает с добавленными элементами после бесконечной загрузки прокрутки. Как и прежде, к сожалению. - person R4ttlesnake; 13.01.2014
comment
Извините, я изменил код между своим последним сообщением (и добавил демонстрацию jsFiddle). У вас есть образец HTML? - person jammykam; 13.01.2014
comment
Эй, это все еще не работает с добавленными элементами, вот упрощенная структура моего HTML: <div id="main"> <article> Content of article </article> <h2 class="subtitled">Content of h2</h2> </div> h2 должен быть за пределами статьи и следовать за ней, я изменил ваш код с .children на .next, чтобы он работал над этим структура, но, как я уже сказал, еще не для добавленных элементов... - person R4ttlesnake; 13.01.2014
comment
Вам нужно вызвать document для анализа нового добавленного содержимого: $(document).on('mouseenter mouseleave', '#main article', function() { - person lolo; 13.01.2014
comment
@лоло Почему? Вы всегда должны подключаться к ближайшему селектору, когда это возможно - person jammykam; 13.01.2014
comment
@ user2355143 Я обновил скрипт jsfiddle.net/jammykam/YTuXY/2, так как я могу t Данные загрузки Ajax Я смоделировал это, но вы можете видеть, что это все еще работает. У вас должно быть что-то не так где-то еще, проверьте HTML после того, как он был загружен в ваш документ, чтобы убедиться, что он вставлен в правильный элемент, а разметка соответствует ожиданиям. - person jammykam; 13.01.2014
comment
Ладно, извини, я понял, что проблема в другом. Пока спасибо… Поскольку ‹h2› следует за ‹article›, а бесконечная прокрутка захватывает только элемент ‹article› в качестве селектора элементов, там, где нет ‹h2› в добавленных элементах. Итак, мне нужны элементы ‹h2› на фиксированном месте внизу границы. Как только я помещаю их внутрь ‹article›, которая имеет {position: relative;}, элементы ‹h2› фиксируются относительно родительской ‹article› внизу каждой ‹article›. Есть ли способ сохранить ‹h2› внутри ‹статьи›, но при этом зафиксировать их внизу браузера? Спасибо! - person R4ttlesnake; 13.01.2014
comment
H2 отображается в обычном потоке документа, если вы хотите, чтобы его положение было фиксированным, вы можете расположить его относительно #main, используя абсолютное положение и top\bottom\left\right jsfiddle.net/jammykam/YTuXY/4 Если это ваша единственная проблема, пожалуйста, откройте новый вопрос и не забудьте проголосовать и принять этот :) - person jammykam; 13.01.2014