jQuery hover effects stop working when new set of posts are loaded in

Question

I'm working on a WordPress website and my blog posts are set up like this:

enter image description here

When I click on an arrow on either side, the current set of six posts fade out and the new set of posts fade in using the code below:

$('#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);
        });
    });
});

I also have it set up so that when I hover over a post thumbnail, the image fades out and the text fades in using the code below:

$('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 );

});

This is my 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 -->

My problem:

When I click an arrow to reveal the next set of posts, two things go wrong:

1) The mouse hovers stop working, meaning that when I hover over a post thumbnail, nothing happens.

2) The new set of posts get wrapped in their own #article-list div so there ends up being two #article-list divs with one parenting the other.

Here's what I mean:

Here's what I mean.

I'm having a hard time trying to get these two issues fixed. If anybody out there can identify the problem, I'd really appreciate the help!

You need to load the content of "link + ' #article-list'" not the whole element. And reload your event listeners after the loading is finished. — Andy, Sep 05 '14 at 13:38

score 2 · Answer 1 · edited May 23 '17 at 11:49

2

About your hover not working, it is a duplicate of Event binding on dynamically created elements?.

Having twice #article-list is normal since you are loading it inside an other #article-list. What you can simply do is unwrap the second one (since the first one should have the delegated havent mentioned above) :

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

edited May 23 '17 at 11:49

Community

1
1

answered Sep 05 '14 at 13:42

Karl-André Gagnon

33,662
5
50
75

Thank you for the fix on the duplicate `#article-list` divs. I looked at the event binding link and in the first answer, jQuery's `on` is mentioned. However, aren't I already using that for the hover links? Is there something else I need to add? – J82 Sep 06 '14 at 01:24
You are using `.on` without a selector as argument, which mean you are directly binding the event on the element. Laters elements are do not have those event since they weren't there when you bind it. You need to use `.on` on the parent of the element and then pass the children element selector to work with dynamic element! – Karl-André Gagnon Sep 08 '14 at 12:39

HMR · Accepted Answer · 2014-09-06T03:21:16.640

1

Maybe the following works:

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

See the api documentation on delegated events: http://api.jquery.com/on/#direct-and-delegated-events

edited Sep 06 '14 at 03:21

answered Sep 05 '14 at 13:38

HMR

37,593
24
91
160

score 0 · Answer 3 · edited Sep 05 '14 at 14:34

you can try this way
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 -->

Event:

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(); 
            });
        });
    });
 });

If elements are dynamically added it's better to use event delegation. Attach the event on the container of the elements instead of the elements directly and only trigger the event in case the selector argument matches: http://api.jquery.com/on/#direct-and-delegated-events — HMR, Sep 06 '14 at 03:25

jQuery hover effects stop working when new set of posts are loaded in

My problem:

3 Answers3