将滚动事件绑定到动态DIV？

Question

例如,在使用AJAX之后,我将拥有一个可滚动的DIV.如何将滚动事件绑定到它？

我试过了:

$(window).on("scroll", ".mydiv", function(){...})
$(document).on("scroll", ".mydiv", function(){...})
$(".mydiv").on("scroll", function(){...})
$(".mydiv").scroll(function(){...})

但他们没有工作.

DEMO

Answer 1

我只是重新回答这个老问题,因为我没有找到好的答案,我努力争取更好的方式来监听动态追加元素的'scroll'事件.

由于Scroll事件在DOM中没有冒泡,因此我们无法使用on(),就像我们用于滚动一样.所以我想出了在元素中听我自己的自定义触发事件,我想听"滚动"事件.

在元素附加到DOM后跟随触发我自己的自定义事件后,滚动事件被绑定.

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

body{ font-family: tahoma; font-size: 12px; }
	
	.myDiv{
		height: 90px;
		width: 300px;
		border: 1px solid;
		background-color: lavender;
		overflow: auto;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="button" id="btn" value="Click"/>

Answer 2

在使用 jquey.on() 之前，元素必须存在于文档中。

<div class="mydiv"></div>您可以在使用 jquery.on() 之前插入虚拟对象

$('body').append('<div class="mydiv" style="display:none"></div>');
$(document).on("scroll", ".mydiv", function(){...})