javascript - 使用 jquery 选择页面加载后添加的元素

Question

我正在制作一个页面，通过在到达页面顶部或底部时复制内容来不断上下滚动，使用以下代码:

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

这是它工作的 html:

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

一切正常，但现在问题来了。字幕是隐藏的，并在悬停时显示。它适用于页面加载时可见的元素，但不适用于滚动功能添加的元素。

我尝试过使用 jquery 的 live() 和 on() 方法，但没有成功。这是我尝试过的代码，(并且适用于页面加载时出现的元素)

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

有人对我可能做什么有任何意见吗？非常感谢您的帮助。

Answer 1

您必须正确使用它，并将事件委托(delegate)给页面加载时存在的父级

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