本来前端就是二把刀,前几天手机上要用到动态下拉加载,当时动态加载的数据怎么都不能添加scroll事件,也是一脸懵逼.
幸亏有广大的网友,这是百度到了,动态添加元素加scroll事件.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
}
textarea{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<textarea id="wo">
</textarea>
</div>
<button id="add-textarea">添加textarea</button>
<button id="add-data">添加数据</button>
<script src="//cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
<script>
function initTextarea(parentEl,changeEl,text){
var elTextarea = $("#wo");
elTextarea.on('scroll',function(){
console.log('scroll');
});
$(changeEl).click(function(){
elTextarea.val(text);
});
console.log(elTextarea);
$(parentEl).append(elTextarea);
}
$('#add-textarea').click(function(){
initTextarea('div',"#add-data",'123\n56\n89\n78\n123\n56\n89\n78\n123\n56\n89\n78\n123\n56\n89\n78\n123\n56\n89\n78\n123\n56\n89\n78\n123\n56\n89\n78\n123\n56\n89\n78\n');
});
</script>
</body>
</html>
至于有滚动条的,用右外边据为负可以隐藏.