javascript - jquery 如何给动态生成的textarea绑定scroll事件
本文介绍了javascript - jquery 如何给动态生成的textarea绑定scroll事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<div>
<texteare><textarea>
<texteare><textarea>
<div>div的高度固定100px，textarea的高度也是100px。textarea是动态生成的，当textarea内容很多时会出现垂直滚动条，我想通过jQuery(1.8)获取textarea的滚动事件。
$('div').on('scroll','textarea',function(){
//……
console.log('scroll')
});通过上面的代码获取不到textarea scroll事件，因为div并不会滚动。
请问一下该怎么写代码才能获取到动态生成textarea的scroll事件
添加示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
}
textarea{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
</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>
$('#add-textarea').click(function () {
$('div').html('<textarea></textarea>')
})
$('#add-data').click(function () {
$('textarea').val('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')
})
$(document).on('scroll','textarea',function(){
console.log('scroll')
})
</script>
</body>
</html>解决方案
纠正几个错误。onscroll不是onmousewheel,比较特殊,必须是元素可滚动才能触发。
然后on就是绑定在了$('这个元素').on(....)这个元素上,div没有滚动条触发不了。
你可以在添加textarea的时候直接给textarea绑定事件呀。
类似这样封装一下，应该可行
function initTextarea(parentEl,changeEl,text){
var elTextarea = $('<textarea></textarea>');
elTextarea.on('scroll',function(){
console.log('scroll');
});
$(changeEl).click(function(){
elTextarea.val(text);
});
$(parentEl).append(elTextarea);
}
$('.add').click(function(){
initTextarea(实参1,实参2，实参3);
});这篇关于javascript - jquery 如何给动态生成的textarea绑定scroll事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
