例如，在使用 AJAX 之后，我将拥有一个可滚动的 DIV。如何绑定滚动事件？
我试过了：
$(window).on("scroll", ".mydiv", function(){...})
$(document).on("scroll", ".mydiv", function(){...})
$(".mydiv").on("scroll", function(){...})
$(".mydiv").scroll(function(){...})
但他们没有工作。
【问题讨论】：
在使用 jquey.on() 之前，元素必须存在于文档中。
您可以在使用 jquery.on() 之前插入虚拟 <div class="mydiv"></div>
$('body').append('<div class="mydiv" style="display:none"></div>');
$(document).on("scroll", ".mydiv", function(){...})
【讨论】：
尝试从您的代码中修改此内容
$(document).ready(function(){
// Trigger
$("#btn").click(function(){
if ($(".myDiv").length == 0) // Append once
$("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>');
});
// Not working
$(".myDiv").scroll(function(){
alert("A");
});
// Not working
$(document).on("scroll", ".myDiv", function(){
alert("A");
});
});
希望有帮助
【讨论】：
http://jsfiddle.net/hainawa/cruut/
$(document).ready(function(){
var $mydiv = $('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>');
// It will work
$mydiv.scroll(function(){
alert("A");
});
// Trigger
$("#btn").click(function(){
//You are using the method append,so you don't need judge if div.mydiv exits.
//You'll need do this if you're using display:none
$("body").append($mydiv);
});
});
【讨论】：
你应该为你的 div 指定一个高度，溢出等于 auto：
.myDiv{
height: 90px;
overflow: auto;
}
【讨论】：
我遇到了同样的问题，我在jQuery .on() API 中找到了以下内容：
在所有浏览器中，加载、滚动和错误事件（例如，在元素上）不会冒泡。在 Internet Explorer 8 及更低版本中，粘贴和重置事件不会冒泡。此类事件不支持与委托一起使用，但可以在事件处理程序直接附加到生成事件的元素时使用。
所以不幸的是，这似乎是不可能的。
【讨论】：
我只是重新提出这个老问题，因为我没有找到好的答案，并且我努力寻找更好的方法来聆听动态附加元素的“滚动”事件。
由于滚动事件不会在 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"/>【讨论】：
直接附加on就可以了，查看下面的例子。
希望这会有所帮助。
$("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>');
$(".myDiv").on("scroll", function(){
console.log("scrolling");
}); 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.1/jquery.min.js"></script>【讨论】：
在我的应用程序中，我有一个按钮，每次单击按钮时都会将表单字段集附加到正文 - 我想将页面向下滚动到新元素，但由于明显的原因（冒泡等），这不起作用.)。我想出了一个简单的解决方法...
function scroll(pixels){
$('html, body').animate({
scrollTop: pixels
}, 1000);
};
function addObservation(x){
$('body').append(x);
newFieldSet = $('fieldset').last();
pixelsFromTop = newFieldSet.offset().top;
scroll(pixelsFromTop);
};
$(document).on("click", "#add_observation", function(){
addObservation("<fieldset>SOME FORM FIELDS HERE</fieldset>");
});
因此，每次添加字段集时，jQuery 都会查找最后添加的字段集，然后.offset().top 测量该字段集距顶部的像素数，然后滚动窗口该距离。
【讨论】：
在动态加载的内容上侦听滚动事件的简单方法
<div class="scrollDiv" onscroll="LoadHistory()>
...Your contents to scroll goes here
</div>
</script type="text/javascript">
function LoadHistory(){
var pos = $(".scrollDiv").scrollTop();
if (pos == 0) {
// your code goes in here
}
}
</script>
【讨论】：