使用body on()绑定将滚动事件附加到div失败 [英] Attach scroll event to div with body on() binding fails

问题描述

我在滚动事件上遇到了麻烦.

I'm having some trouble with the scroll event.

我正在尝试将事件附加/绑定到特定的div， 由于以下事实，我正在使用$('body').on()来执行此操作 排序时会重新加载内容，因此它将失去其绑定.

I'm trying to attach/bind the event to a specific div, and I'm using $('body').on() to do it, due to the fact that the content is reloaded when sorting, so it will lose its binding.

这不起作用，该事件未触发:

This doesn't work, the event is not fired:

$('body').on('scroll', 'div.dxgvHSDC + div', function () {
}

与此相反，它起作用:

$('body').on('mousewheel DOMMouseScroll', 'div.dxgvHSDC + div', function () {
}

这也是:

$('div.dxgvHSDC + div').on('scroll', function () {
}

出什么问题了?

推荐答案

您不能将委派添加到scroll事件.此事件不会使DOM冒泡，因此您不能将其委托给任何元素.您可以在此处找到

You can not add delegation to the scroll event. This event doesn't bubble up the DOM and therefore you can not delegate it to any element. You can find more information here:

滚动事件不会冒泡.

尽管该事件不会冒泡，但是当用户滚动整个页面时，浏览器会在文档和窗口上触发滚动事件.

Although the event does not bubble, browsers fire a scroll event on both document and window when the user scrolls the entire page.

您将需要在创建滚动元素的事件中创建事件处理程序.

You will need to create the event handler inside the event which creates your scrolling element.

生活示例: http://jsfiddle.net/Um5ZT/1/

$('#link').click(function(){

    //dynamically created element
    $('body').append('<div class="demo"></div>');
        
    //dynamically added event
    $('.demo').on('scroll', function () {
        alert('scrolling');
    });
    
});

这篇关于使用body on()绑定将滚动事件附加到div失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！