javascript - jquery 如何给动态生成的textarea绑定scroll事件-PHP中文网问答


         <texteare><textarea>
<p></code></pre>
<p>p的高度固定100px，textarea的高度也是100px。textarea是动态生成的，当textarea内容很多时会出现垂直滚动条，我想通过jQuery(1.8)获取textarea的滚动事件。</p>
<pre class='brush:php;toolbar:false;'><code> $('p').on('scroll','textarea',function(){
        //……
        console.log('scroll')
    });</code></pre>
<p>通过上面的代码获取不到textarea scroll事件，因为p并不会滚动。<br>请问一下该怎么写代码才能获取到动态生成textarea的scroll事件</p>
<p>添加示例代码</p>
<pre class='brush:php;toolbar:false;'><code><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            width: 100px;
            height: 100px;
        }
        textarea{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<p>
</p>
<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 () {
        $('p').html('<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')
    })

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); });

全部回复(4)

怪我咯2017-04-11 13:09:37 4楼

纠正几个错误。
onscroll不是onmousewheel,比较特殊,必须是元素可滚动才能触发。
然后on就是绑定在了$('这个元素').on(....)这个元素上,p没有滚动条触发不了。
你可以在添加textarea的时候直接给textarea绑定事件呀。

类似这样封装一下，应该可行

赞 +0

添加回复

PHP中文网2017-04-11 13:09:37 3楼

scroll 事件不冒泡所以监听父元素的scroll是没有用的,只能直接绑定到实际scroll的dom上面

迷茫2017-04-11 13:09:37 2楼

1.这段要在动态生成之后吧
2.你这里只有一个p? 不如加个id什么的去做选择器
<p id = "xxx">

<texteare><textarea>
 <texteare><textarea>

<p>

$('#xxx').on('scroll','textarea',function(){

    //……
    console.log('scroll')
});

大家讲道理2017-04-11 13:09:37 1楼

$(document).on('scroll','textarea',function(){...})