Jquery .on（'scroll'）不滚动时触发事件 [英] Jquery .on('scroll') not firing the event while scrolling

问题描述

滚动 ul 时，滚动事件未触发。我正在使用jQuery版本1.10.2。当我从ajax页面加载 ul 时，我无法使用 $（'ulId'）。on（'scroll'，function （）{}）; 或其他直播方式。请帮助我找到一个解决方案。

  $（document）.on（'scroll'，'#ulId'，function ）{
 console.log（'Event Fired'）; 
}）; 
  

解决方案

你可能忘了给 ＃ before id for id selector，你需要在 id 之前给出＃ ie is ulId

您可能需要在包含ul和scrolls的div上绑定滚动事件。您需要绑定事件与div而不是 ul

  $（文件）.on（'scroll'，'#idOfDivThatContainsULandScroll'，function（）{
 console.log（'Event Fired'）; 
}）; 
  

编辑

以上内容不起作用，因为滚动事件在用于事件委托的DOM中不会起泡，请参阅此问题什么不委托滚动工作？

但是使用现代浏览器> IE 8，您可以通过其他方式。而不是使用jquery委托，您可以使用java脚本 document.addEventListener 中的事件捕获来实现，请参阅这个 tuturial 。

现场演示

  document.addEventListener（'scroll'，function（event）{
 if（event.target.id ==='idOfUl'）{//或任何其他过滤条件
 console.log（'滚动'，event.target）; 
} 
}，true / *捕获事件* /）; 
  

如果您不需要事件委托，那么您可以直接将滚动事件绑定到ul而不是委派它通过文件。

现场演示

  $（＃idOfUl） .on（'scroll'，function（）{
 console.log（'Event Fired'）; 
}）; 
  

Scroll event is not firing while scrolling the ul. I'm using jQuery version 1.10.2. As I'm loading the ul from an ajax page, I couldn't use $('ulId').on('scroll', function() {}); or other live methods. Please help me to find a solution.

$(document).on( 'scroll', '#ulId', function(){
    console.log('Event Fired');
});

解决方案

You probably forgot to give # before id for id selector, you need to give # before id ie is ulId

You problably need to bind scroll event on div that contains the ul and scrolls. You need to bind the event with div instead of ul

$(document).on( 'scroll', '#idOfDivThatContainsULandScroll', function(){
    console.log('Event Fired');
});

Edit

The above would not work because the scroll event does not bubble up in DOM which is used for event delegation, see this question why doesn't delegate work for scroll?

But with modern browsers > IE 8 you can do it by other way. Instead of delegating by using jquery you can do it using event capturing with java script document.addEventListener, see how bubbling and capturing work in this tuturial.

Live Demo

document.addEventListener('scroll', function (event) {
    if (event.target.id === 'idOfUl') { // or any other filtering condition        
        console.log('scrolling', event.target);
    }
}, true /*Capture event*/);

If you do not need event delegation then you can bind scroll event directly to the ul instead of delegating it through document.

Live Demo

$("#idOfUl").on( 'scroll', function(){
   console.log('Event Fired');
});

这篇关于Jquery .on（'scroll'）不滚动时触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！