jquery - 将滚动事件绑定(bind)到动态 DIV？

Question

例如，在使用 AJAX 之后，我将拥有一个可滚动的 DIV。如何给它绑定(bind)滚动事件？

我试过:

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

但他们没有工作。

DEMO

Answer 1

我只是重新提出这个老问题，因为我没有找到好的答案，而且我一直在努力寻找更好的方法来监听动态附加元素的“滚动”事件。

由于滚动事件不会在 DOM 中冒泡，因此我们不能像滚动那样使用 on()。因此，我想出了在我想要收听“滚动”事件的元素中收听我自己的自定义触发事件。

在元素附加到 DOM 上后触发我自己的自定义事件后，滚动事件被绑定(bind)。

$("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"/>