Question

我在WordPress网站上工作，我的博客帖子设置如下：

enter image description here

当我点击任意一侧的箭头时，当前的六个帖子会淡出，新的帖子会使用下面的代码淡入：

$('#article-list').on('click', '.paging-navigation a', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    $('#article-list').fadeOut(500, function(){
        $(this).load(link + ' #article-list', function() {
            $(this).fadeIn(500);
        });
    });
});

我也进行了设置，以便当我将鼠标悬停在后缩略图上时，图像会淡出，文字会使用以下代码淡入：

$('article').on("mouseenter mouseleave", function( e ) {

        // mouseenter variable returns true if mouseenter event is occurring 
        // and it returns false if event is anything but mouseenter.
    var mouseenter = e.type === "mouseenter",
        $this = $(this),
        img = $this.children('img'),
        postInfo = $this.children('.post-info');

        // Both of these use ternary if statements that are equal to:
        // if ( mouseenter ) { var imgFade = 0.4; } else { var imgFade = 1; }
        // if ( mouseenter ) { var postInfoFade = 'fadeIn'; } else { var postInfoFade = 'fadeOut'; }
    var imgFade = mouseenter ? 0.4 : 1,
        postInfoFade = mouseenter ? 'fadeIn' : 'fadeOut';

    img.stop().fadeTo( 500, imgFade );
    postInfo.stop()[ postInfoFade ]( 500 );

});

这是我的HTML：

<div id="article-list">         

    <article>
        <div class="post-info" style="display: none; opacity: 1;">
            <h1 class="entry-title"><a href="/" rel="bookmark">Post Title</a></h1>
            <span class="posted-on">
                <a href="/" rel="bookmark">
                    <time class="entry-date published" datetime="2014-09-04T06:35:12+00:00">September 4, 2014</time>
                    <time class="updated" datetime="2014-09-05T01:59:18+00:00">September 5, 2014</time>
                </a>
            </span>
        </div>
        <img width="312" height="200" src="post-image.jpg" style="opacity: 1;"> 
    </article>

    <article>
        <div class="post-info" style="display: none; opacity: 1;">
            <h1 class="entry-title"><a href="/" rel="bookmark">Post Title</a></h1>
            <span class="posted-on">
                <a href="/" rel="bookmark">
                    <time class="entry-date published" datetime="2014-09-04T06:35:12+00:00">September 4, 2014</time>
                    <time class="updated" datetime="2014-09-05T01:59:18+00:00">September 5, 2014</time>
                </a>
            </span>
        </div>
        <img width="312" height="200" src="post-image.jpg" style="opacity: 1;"> 
    </article>

    <article>
        <div class="post-info" style="display: none; opacity: 1;">
            <h1 class="entry-title"><a href="/" rel="bookmark">Post Title</a></h1>
            <span class="posted-on">
                <a href="/" rel="bookmark">
                    <time class="entry-date published" datetime="2014-09-04T06:35:12+00:00">September 4, 2014</time>
                    <time class="updated" datetime="2014-09-05T01:59:18+00:00">September 5, 2014</time>
                </a>
            </span>
        </div>
        <img width="312" height="200" src="post-image.jpg" style="opacity: 1;"> 
    </article>

    <article>
        <div class="post-info" style="display: none; opacity: 1;">
            <h1 class="entry-title"><a href="/" rel="bookmark">Post Title</a></h1>
            <span class="posted-on">
                <a href="/" rel="bookmark">
                    <time class="entry-date published" datetime="2014-09-04T06:35:12+00:00">September 4, 2014</time>
                    <time class="updated" datetime="2014-09-05T01:59:18+00:00">September 5, 2014</time>
                </a>
            </span>
        </div>
        <img width="312" height="200" src="post-image.jpg" style="opacity: 1;"> 
    </article>

    <article>
        <div class="post-info" style="display: none; opacity: 1;">
            <h1 class="entry-title"><a href="/" rel="bookmark">Post Title</a></h1>
            <span class="posted-on">
                <a href="/" rel="bookmark">
                    <time class="entry-date published" datetime="2014-09-04T06:35:12+00:00">September 4, 2014</time>
                    <time class="updated" datetime="2014-09-05T01:59:18+00:00">September 5, 2014</time>
                </a>
            </span>
        </div>
        <img width="312" height="200" src="post-image.jpg" style="opacity: 1;"> 
    </article>

    <article>
        <div class="post-info" style="display: none; opacity: 1;">
            <h1 class="entry-title"><a href="/" rel="bookmark">Post Title</a></h1>
            <span class="posted-on">
                <a href="/" rel="bookmark">
                    <time class="entry-date published" datetime="2014-09-04T06:35:12+00:00">September 4, 2014</time>
                    <time class="updated" datetime="2014-09-05T01:59:18+00:00">September 5, 2014</time>
                </a>
            </span>
        </div>
        <img width="312" height="200" src="post-image.jpg" style="opacity: 1;"> 
    </article>

    <nav class="navigation paging-navigation" role="navigation">
        <h1 class="screen-reader-text">Posts navigation</h1>
        <div class="nav-links">
            <div class="nav-previous">
                <a href="/page/2/">
                    Older posts <span class="meta-nav">→</span>
                </a>
            </div>
        </div><!-- .nav-links -->
    </nav><!-- .navigation -->                  
</div><!-- #article-list -->

我的问题：

当我点击箭头显示下一组帖子时，有两件事出错：

1）鼠标悬停停止工作，这意味着当我将鼠标悬停在后缩略图上时，没有任何反应。

2）新的帖子集被包装在他们自己的#article-list div中，因此最终会有两个#article-list div，其中一个为父母，另一个为父母。

这就是我的意思：

Here's what I mean.

我很难解决这两个问题。如果有人能够发现问题，我真的很感激帮助！

Answer 1

关于您的悬停不起作用，它与Event binding on dynamically created elements?重复。

两次#article-list是正常的，因为您将其加载到其他#article-list内。你可以做的就是打开第二个（因为第一个应该有上面提到的委托）：

$(this).load(link + ' #article-list', function() {
    $(this).find('#article-list > *').unwrap().end().fadeIn(500);
});

Answer 2

可能以下工作：

$(document).on("mouseenter mouseleave", 
  "article",function( e ) {

请参阅有关委派事件的api文档：http://api.jquery.com/on/#direct-and-delegated-events

Answer 3

你可以这样试试 HTML：

<div id="article-list-wrapper">   
    <div id="article-list">         

        <article>
           ...
        </article>

        <article>
           ...
        </article>

        <article>
           ...
        </article>

    </div><!-- #article-list -->

    <nav class="navigation paging-navigation" role="navigation">
        <h1 class="screen-reader-text">Posts navigation</h1>
        <div class="nav-links">
            <div class="nav-previous">
                <a href="/page/2/">
                    Older posts <span class="meta-nav">→</span>
                </a>
            </div>
        </div><!-- .nav-links -->
    </nav><!-- .navigation -->    

</div><!-- #article-list-wrapper -->

事件：

var thumbEventBinding = function(){
    $('article').on("mouseenter mouseleave", function( e ) {

    ...
    });
};

var navEventBinding = function(){
    $('#article-list-wrapper').on('click', '.paging-navigation a', function(e){
        e.preventDefault();
        var link = $(this).attr('href');
        $('#article-list-wrapper').fadeOut(500, function(){
            $(this).load(link + ' #article-list', function() {
                $(this).fadeIn(500);
                // page load means html dom changed
                // then lose binding events
                // you must bind again
                navEventBinding();
                thumbEventBinding(); 
            });
        });
    });
 });

当加载新的帖子集时，jQuery悬停效果停止工作

我的问题：

3 个答案: