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

As per jQuery docs here：

在所有浏览器中，加载，滚动和错误事件（例如，在 element）不要冒泡。不支持使用这样的事件委托，但它们可以在事件处理程序直接使用时使用附加到生成事件的元素..

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

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

<强> 实施例 ：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="tmpl" type="text/template">
    <div class="chat-window" contenteditable></div>
</script>
<p>Type any content below and cause it to scroll..</p>
<div id="wrap"></div>
<p id="result"></p>

＆＃13;

Answer 2

滚动事件不会冒泡DOM。见：http://www.quirksmode.org/dom/events/scroll.html

http://api.jquery.com/on/：

在所有浏览器中，加载，滚动和错误事件（例如，在元素）不要泡。在Internet Explorer 8及更低版本中，粘贴和重置事件不会冒泡。不支持使用此类事件使用委托，但它们可以在事件处理程序使用时使用直接附加到生成事件的元素。

另外：https://forum.jquery.com/topic/cannot-use-delegate-for-scroll-events：

滚动事件不会冒泡DOM，因此live（）和on（）以及delegate（）将不起作用。您必须自己将事件处理程序绑定到动态创建的元素。

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

2 个答案: