jquery .on（'scroll'）在滚动时不会触发事件

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

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

Answer 1

你可能忘了在id之前给IDselect器，你需要在id之前给#即ulId

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

 $(document).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') { // or any other filtering condition console.log('scrolling', event.target); } }, true /*Capture event*/); 

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

现场演示

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

Answer 2

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

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

删除或更换ul后，您可以解除绑定事件。

希望它可以帮助别人。

Answer 3

 $("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"); }) } 

看到这个post – 绑定滚动事件dynamicDIV？

Answer 4

使用VueJS我试过这个问题的每一个方法，但都没有工作。 所以如果有人在挣扎，

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

Answer 5

另一种select可能是：

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

参考： 这里

Answer 6

你可以将#ulId放在ajax加载之前的文档中（用css display：none;），或者把它包含在一个包含div（用css display：none;）中，然后在加载ajax页面的时候加载inner html，这样滚动事件将被链接到已经在那里的AJAX之前的div？

那么你可以使用：

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

显然用任何实际的可滚动div的id代替ulId。

然后设置CSS显示：块; 在负载上的#ulId（或包含div）？

Answer 7

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

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

我遇到的问题是，我不知道孩子什么时候加载到DOM，但我一直在检查它。

注意：这很有用，如果它很快发生，但没有正确的文件加载后，否则将使用客户端计算机的权力，无故。