Jquery .on('scroll')在滚动时不触发事件

Question

滚动时滚动事件未触发ul.我正在使用jQuery版本1.10.2.当我ul从ajax页面加载时,我无法使用$('ulId').on('scroll', function() {});或其他实时方法.请帮我找一个解决方案.

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

Answer 1

你可能忘了#在id之前给id id选择器,你需要#在idie 之前给出ulId

你可能需要在包含ul和scroll的div上绑定scroll事件.您需要将事件与div绑定而不是ul

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

编辑

上面的代码不起作用,因为滚动事件不会在用于事件委托的DOM中冒泡,请参阅此问题为什么不委托滚动工作？

但是对于现代浏览器> IE 8,您可以通过其他方式实现.您可以使用java脚本使用事件捕获来执行此操作,而不是通过使用jquery进行委派document.addEventListener,了解如何在此tuturial中进行冒泡和捕获工作.

现场演示

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

如果您不需要事件委派,那么您可以将scroll事件直接绑定到ul而不是委托它true.

现场演示

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

Answer 2

使用ajax加载ul后绑定滚动事件已解决了这个问题.在我的发现中,$(document).on('scroll','#id',function(){...})无法正常工作,并在找到ajax加载后绑定scroll事件.

$("#ulId").bind('scroll', function() {
   console.log('Event worked');
}); 

删除或替换ul后,您可以取消绑定事件.

希望它可以帮助某人.

Answer 3

使用VueJS我在这个问题中尝试了所有方法,但都没有用.所以如果有人正在努力相同:

mounted() {
  $(document).ready(function() { //<<====== wont work without this
      $(window).scroll(function() {
          console.log('logging');
      });
  });
},