Question

我正在使用window.scroll事件来加载div上的内容，就在滚动的按钮到达时。

 $(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMoreCommentsOnArticle();
   }
});

  function loadMoreCommentsOnArticle(){
                $(window).bind('scroll');
                var dynamicData = fetchData();
                $('#parentElement').append(dynamicData);
}

最初绑定后，

滚动没有绑定。也许是通过$（window）.unbind（＆＃39; scroll＆＃39;）。但我正在尝试使用$（window）.bind（＆＃39; scroll＆＃39;）再次绑定滚动;但它没有用。

不使用$（window）.unbind（＆＃39; scroll＆＃39;）。滚动事件很快就会触发。

根据Rory，我正在使用这种方式

var $window = $(window);
function windowScroll() {
  if ($window.scrollTop() + $window.height() > $(document).height() - 100) {
    window.off('scroll');
    loadMoreCommentsOnArticle();
  }
}
 $window.scroll(windowScroll);

Answer 1

问题是因为当你重新绑定loadMoreCommentsOnArticle()中的滚动事件时，你没有提供运行的功能。您可以通过将滚动逻辑解压缩到它自己的函数来解决问题，以便更轻松地进行绑定/重新绑定。

另请注意，bind()和unbind()已弃用。您应该使用on()和off()代替。

var $window = $(window);

function windowScroll() {
  if ($window.scrollTop() + $window.height() > $(document).height() - 100) {
    $window.off('scroll');
    loadMoreCommentsOnArticle();
  }
}

$window.scroll(windowScroll);

function loadMoreCommentsOnArticle() {
  $window.on('scroll', windowScroll);
  $('#parentElement').append(fetchData());
}

function fetchData() {
  console.log('loading data...')
  return '<div>More data...</div>';
}

#parentElement div {
  height: 3000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parentElement">
  <div>Some data...</div>
</div>

解除绑定后使用jquery无法绑定窗口上的滚动

1 个答案: