Question

我正在开发一个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：relative;}的内部，元素就固定在父元素的每个底部。有没有办法，保持内部，但仍然将它们固定在浏览器的底部？谢谢！

Answer 1

在jQuery中使用delegated events：

<强> 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 Demo

~~我假设article是一个CSS类，所以你需要选择器.article。~~以这种方式绑定你不需要重新激活该函数。 ajax update，你在父容器上附加“watch”，然后“监听”所有新附加的子元素。

编辑：在further reading之后，您可以使用mouseeneter和mouseleave事件，因为它们具有正确的（缺少）事件冒泡，否则“鼠标输入”事件将根据您的需要频繁启动。 / p>

jQuery简单的悬停效果在附加元素上丢失（通过无限滚动）

1 个答案: