例如,在使用AJAX之后,我将拥有一个可滚动的DIV.如何将滚动事件绑定到它？
我试过了：
$(window).on("scroll",".mydiv",function(){...})
$(document).on("scroll",function(){...})
$(".mydiv").on("scroll",function(){...})
$(".mydiv").scroll(function(){...})
但他们没有工作.
DEMO
解决方法
我只是重新回答这个老问题,因为我没有找到好的答案,我努力争取更好的方式来监听动态追加元素的’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"/>