观察div doenst中的滚动为未来事件工作

Question

不,这不是重复的.对于各种事件,这是有效的 - 滚动除外!

我们正在弹出聊天窗口,我们需要观察那些滚动事件.

这很有效

$(".chat-window").scroll(function() {
    var scroll = $(this).scrollTop();
    console.log(scroll);
})

OBV.在聊天窗口已经弹出后,如果我将它扔进我的控制台,它就可以工作了.

但我们需要它用于未来的元素.这个解决方案不起作用

这项工作非常重要

$(document).on("scroll", ".chat-window", function(event) {
    var scroll = $(this).scrollTop();
    console.log(scroll);
});

"不起作用"我的意思是该功能未被触发.

是我还是jquery中的常见错误？我无法看到狡猾的陈词滥调.

Answer 1

根据此处的 jQuery 文档：

在所有浏览器中，加载、滚动和错误事件（例如，在元素上）不会冒泡。此类事件不支持与委托一起使用，但当事件处理程序直接附加到生成的元素时可以使用它们事件..

但是，您可以在父级或文档上使用 Javascript来捕获事件，然后使用动态元素addEventListener进行委托。event.target

wrap.addEventListener('scroll', function (e) {
    if (e.target.className === 'chat-window') { 
        console.log('scrolling', e.target);
    }
}, true);

例子：

wrap.addEventListener('scroll', function (e) {
    if (e.target.className === 'chat-window') { 
        console.log('scrolling', e.target);
    }
}, true);

var chat = $("#tmpl").html(), 
    $chat = $(chat),
    wrap = document.getElementById('wrap');

$("#wrap").append($chat);

wrap.addEventListener('scroll', function (e) {
    if (e.target.className === 'chat-window') { 
        console.log('scrolling');
    }
}, true);

console.log = function(txt) {
  $("#result").html($("#result").html() + "<br>" + txt);
}

.chat-window {
    height: 120px; width: 320px;
    border: 1px solid gray;
    overflow: auto;
}