                        課程
                    
                        /前端開發(fā)
                        
                            /jQuery
                        
                        /jQuery基礎(三)—事件篇

我使用了三個div，為什么textarea內容改變，還是會顯示在div2中呢？

<!DOCTYPE html>
<html>

<head>
??? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
??? <title></title>
??? <style>
??? .left div,
??? .right div {
??????? width: 100%;
??????? padding: 5px;
??????? margin: 5px;
??????? float: left;
??????? border: 1px solid #ccc;
??? }
?? ?
??? .left div {
??????? background: #bbffaa;
??? }
?? ?
??? .right div {
??????? background: yellow;
??? }
??? </style>
??? <script src="http://idcbgp.cn/static/lib/jquery/1.9.1/jquery.js"></script>
</head>

<body>
??? <h2>input、textarea與select</h2>
??? <div class="left">
??????? <div class="aaron">input：
??????????? <input class="target1" type="text" value="監(jiān)聽input的改變" />
??????? </div>
??????? <div class="aaron1">select：
??????????? <select class="target2">
??????????????? <option value="option1" selected="selected">Option 1</option>
??????????????? <option value="option2">Option 2</option>
??????????? </select>
??????? </div>
??????? <div class="aaron3">textarea：
??????????? <textarea class="target2" rows="3" cols="20">多行的文本輸入控件</textarea>
??????? </div>
??? </div>
??? 輸出結果：
??? <div id="result1">1</div>
??? <div id="result2">2</div>
??? <div id="results">3</div>
??? <script type="text/javascript">
?? ?
??? //監(jiān)聽input值的改變
??? $('.target1').change(function(e) {
??????? $("#result1").html(e.target.value)
??? });???????????????

??? //監(jiān)聽select：
??? $(".target2").change(function(e) {
??????? $("#result2").html(e.target.value)
??? })???????????????

???? //監(jiān)聽textarea：
??? $(".target3").change(function(e) {
??????? $("#results").html(e.target.value)
??? })???????????????
??? </script>
</body>
</html>