例如,在使用 AJAX 之后,我将拥有一个可滚动的 DIV。如何给它绑定(bind)滚动事件?
我试过:
$(window).on("scroll", ".mydiv", function(){...})
$(document).on("scroll", ".mydiv", function(){...})
$(".mydiv").on("scroll", function(){...})
$(".mydiv").scroll(function(){...})
但他们没有工作。
最佳答案
我只是重新提出这个老问题,因为我没有找到好的答案,而且我一直在努力寻找更好的方法来监听动态附加元素的“滚动”事件。
由于滚动事件不会在 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"/>
关于jquery - 将滚动事件绑定(bind)到动态 DIV?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16505182/