jQuery .on（'scroll'）滚动时未触发事件

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

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

您可能忘记了#为id选择器在id之前给出，您需要#在idie之前给出ulId

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

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

编辑

上面的方法不起作用，因为滚动事件不会在用于事件委托的DOM中冒泡，请参阅以下问题，为什么不为滚动委托工作？

但是，使用现代浏览器> IE 8，您可以通过其他方式实现。除了使用jquery进行委派外，您还可以使用Java脚本的事件捕获来完成它document.addEventListener，第三个参数为true; 看看如何在这个教程中冒泡和捕捉。

现场演示

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

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

现场演示

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

使用ajax加载ul后绑定scroll事件已解决了该问题。在我的发现中，$（document）.on（'scroll'，'#id'，function（）{...}）不起作用，并且在ajax加载发现有效后绑定了滚动事件。

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

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

希望它可以帮助某人。

使用VueJS，我尝试了此问题中的每种方法，但均无效果。因此，万一有人在同样的情况下挣扎：

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

另一种选择是：

$("#ulId").scroll(function () { console.log("Event Fired"); })

参考：这里

$("body").on("custom-scroll", ".myDiv", function(){
    console.log("Scrolled :P");
})

$("#btn").on("click", function(){
    $("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>');
    listenForScrollEvent($(".myDiv"));
});


function listenForScrollEvent(el){
    el.on("scroll", function(){
        el.trigger("custom-scroll");
    })
}

看到这篇文章-将滚动事件绑定到动态DIV？

您可以在加载Ajax之前将#ulId放置在文档中（使用css display：none;），还是将其包装在包含div的文件中（使用css display：none;），然后在ajax页面加载期间仅加载内部html，这样滚动事件将被链接到Ajax之前已经存在的div？

然后，您可以使用：

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

显然，将ulId替换为可滚动div的实际ID是什么。

然后设置css display：block; 在加载时#ulId（或包含div）上？

我知道这是很老的事情，但是我解决了这样的问题：我的父元素和子元素是可滚动的。

   if ($('#parent > *').length == 0 ){
        var wait = setInterval(function() {
            if($('#parent > *').length != 0 ) {
                $('#parent .child').bind('scroll',function() {
                  //do staff
                });
                clearInterval(wait);
            },1000);
        }

我遇到的问题是，我不知道何时将孩子加载到DOM，但我一直每秒检查一次。

注意：如果此操作很快就会发生，但不是在文档加载后立即发生，则很有用，否则它将无故使用客户端的计算能力。