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

这是它的工作原理：

<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（）方法，但没有任何运气。这是我尝试过的代码（并且适用于pageload中的元素）

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

有没有人对我可能做的事情有任何意见？非常感谢您的帮助。

Answer 1

您必须正确使用它，并将事件委托给pageload

中存在的父级

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

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

1 个答案: