Question

我正在通过ajax调用动态地无限滚动网页和页面呈现。我无法将滚动事件添加到该html内容。我使用了以下jQuery函数。

// .live() and .bind() are also not working in my case
$(document).on('scroll','#test' , function(){
/*
.
.
.
*/
});

html :-
<div style="overflow-y:auto">
.
.
.
.
.

</div>

感谢任何帮助。

Answer 1

它不起作用的原因是因为“滚动”事件不会像大多数其他事件一样冒泡（例如“点击”）。

您可以比较scroll event和click event，看看“Bubbles”属性是不同的。

这意味着当您的#test元素滚动时，不会通知其父级，因此不会调用$(document).on('scroll', '#test')中的函数。

如果我理解正确，#test元素将来自AJAX响应，因此稍后会添加到文档中。如果是这样，最简单的解决方案是在向DOM添加“滚动”事件监听器时添加#test。

所以，我们假设如下：

的index.html

...
<div id="container">
    <!-- Will contain the HTML loaded by AJAX -->
</div>
...

Ajax的data.html

...
<div>
    <div class="scrolling-element" style="overflow-y:scroll;height:100px;">
       <p style="height:600px">Really tall paragraph that will make my parent scroll!</p>
    </div>
</div>
...

你的jQuery AJAX调用看起来像：

$.ajax('ajax-data.html')
    .done(function( htmlData ) {
        var $newNode = $( htmlData );
        // Append to index.html
        $('#container').append( $newNode );
        // Add the scroll listener. Note that if multiple elements will have the same
        // behavior when scrolling, you may use a pre-defined function
        // (like scrollingFunction below) to have more performant code.
        $newNode.find('.scrolling-element').scroll( scrollingFunction );
    });

function scrollingFunction( event ) {
    console.log('scrolling');
}

如何将jQuery滚动事件添加到动态添加的div中？

1 个答案: