使用 jQuery 检测 ajax 加载元素中的滚动

Question

如果有一个按钮加载了 ajax，并且您需要监听点击它的声音，请像这样使用 .on()：

$(document).on('click', '.button', function(e) {
    // Do somethinh...
});

我知道，但我不能对卷轴使用同样的逻辑。我得到了一个名为 #overlayer 的元素，它加载了 ajax，然后我尝试监听它的滚动并触发一个函数，该函数在它即将退出时向侧边栏添加粘性 class视口：

$(document).on('scroll', '#overlayer', function() {
    stickySidebar();
    console.log('scroll happened');
});

但是没用。

我可以让它像这样工作：

$('#overlayer').on('scroll', function() {
    stickySidebar();
    console.log('scroll happened');
});

但它不适用于 ajax 加载的内容。

Answer 1

将事件绑定到 ajax 加载的元素将不起作用，除非您在将元素插入 DOM 之后执行此操作，例如在回调函数中。假设您使用的是 $.post，请执行以下操作：

$.post("filename", function(data){

    //insert element here

    //event handler
    $('#overlayer').on('scroll', function() {
        stickySidebar();
        console.log('scroll happened');
   });
})

使用 jQuery 检测 ajax 加载元素中的滚动

Detect scroll in an ajax loaded element with jQuery

jquery

scroll