Selecting elements added after pageload with jquery

Question

I am making a page that scrolls endlessly up and down by duplicating the content when reaching the top or bottom of the page, using this code:

var html = $("#wrapper").html();
var what = '<div id="wrapper">'+html+'</div>';
$(window).scrollTop(1);
$(window).scroll(function() {
    if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) {
        $("#wrapper").last().after(what);
        if ($("#wrapper").length > 2) {
            $("#wrapper").last().prev().remove();
            $(window).scrollTop($(window).scrollTop() - $("#wrapper").first().height());
        }
    }
    else if ( $(window).scrollTop() == 0 ) {
        $("#wrapper").first().before(what);
        $(window).scrollTop($("#wrapper").first().height());
        if ($("#wrapper").length > 2) {
            $("#wrapper").last().remove();
        }
    }    
});

This is the html it works on:

<div id="wrapper">
    <div class="what">
        <div class="box">
            <div class="boxcontent">
                <img src="1.jpg" />
                <p class="caption">
                    Caption
                </p>
            </div>
        </div>
        <div class="box">
            <div class="boxcontent">
                <img src="2.jpg" />
                <p class="caption">
                    Caption
                </p>
            </div>
        </div>
        <div class="box">
            <div class="boxcontent">
                <img src="3.jpg" />
                <p class="caption">
                    Caption
                </p>
            </div>
        </div>
        <div class="box">
            <div class="boxcontent">
                <img src="4.jpg" />
                <p class="caption">
                    Caption
                </p>
            </div>
        </div>
        <div class="box">
            <div class="boxcontent">
                <img src="5.jpg" />
                <p class="caption">
                    Caption
                </p>
            </div>
        </div>
        <div class="box">
            <div class="boxcontent">
                <img src="1.jpg" />
                <p class="caption">
                    Caption
                </p>
            </div>
        </div>
        <div class="box">
            <div class="boxcontent">
                <img src="6.jpg" />
                <p class="caption">
                    Caption
                </p>
            </div><!-- .boxcontent -->
        </div><!-- .box -->
    </div><!-- .what -->
</div><!-- #wrapper -->

It all works fine, but now here's the question. The captions are hidden, and are shown on hover. It works on the elements that are visible at page load, but not on the elements that are added by the scroll function.

I have tried using jquery's live() and on() methods but without any luck. This is the code I have tried, (and that works on the elements present at pageload)

$('.boxcontent').on({
    mouseenter: function(){
        $( this ).find( '.caption' ).fadeIn(200)
    },
    mouseleave: function(){
        $( this ).find( '.caption' ).fadeOut(200)
    }
});

Does anyone have any input as to what I might do? Thank you very much for any help.

score 2 · Accepted Answer · answered Mar 31 '15 at 13:24

2

You have to use it correctly, and delegate the events to a parent that exists at pageload

$('#wrapper').on({
    mouseenter: function(){
        $( this ).find( '.caption' ).fadeIn(200)
    },
    mouseleave: function(){
        $( this ).find( '.caption' ).fadeOut(200)
    }
}, '.boxcontent');

answered Mar 31 '15 at 13:24

adeneo

312,895
29
395
388

Thank you! The 'problem' is that the wrapper is also created dynamically, so it doesn't exist either at pageload. I changed your code to work on the body instead of the wrapper. And now it works! But does that have any performance issues - assigning an on() method to the entire body tag? – alxvo Mar 31 '15 at 14:30
@alxvo It does, but you probably won't notice it. More info: http://stackoverflow.com/a/12824698/1913729 – blex Mar 31 '15 at 15:05

Selecting elements added after pageload with jquery

1 Answers1