Jquery 함수는 여러 번 필요할 때 한 번만 실행됩니다.

Question

한 가지 알아야 할 것이 있습니다.

$(document).ready(function() { 
 
    $('.changetext').click(function() { 
 
    $('.textarea').html('TEXT'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="changetext">click me</button> 
 
<div class="textarea"></div>

이 기능은 내 텍스트 영역에 텍스트를 추가합니다. 하지만 여러 번 클릭하면됩니다. 내가 클릭 할 때마다 텍스트를 추가하고 싶습니다. 지금은 한 번만 작동합니다. 두 번 클릭해도 효과가 없습니다. 조언하십시오.

Answer 1

사용 append 대신 같은 html :

$('.textarea').append('TEXT'); 

설명 :html는 이전 데이터를 제거하고 새로운 추가 append는 이전 데이터를 유지하면서 새로운 하나를 추가 할 수 있습니다.

Answer 2

클릭 할 때마다 값을 TEXT (으)로 설정했기 때문에 문제가 발생했습니다. 당신은 가치에 더하고 있지 않습니다. 이 작업을 수행하려면이 같은 val()을 사용할 수 있습니다 :

$('.changetext').click(function() { 
 
    $('.textarea').val(function(i, v) { 
 
    return v + 'TEXT'; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="textarea"></textarea> 
 
<button class="changetext">Add</button>

당신은 값을 업데이트하는 append()를 사용할 수 있지만 나는이 오래된 브라우저 및/또는 jQuery를 버전에 문제가있을 수 있습니다 생각합니다.

Answer 3

html() 메서드는 이전 값을 새 값으로 덮어 쓰거나 업데이트합니다.

$(document).ready(function() { 
 
    var words = ['I', 'love', 'this', 'website']; 
 
    var counter = 0; 
 
    $('.changetext').click(function() { 
 
    if (words[counter]) { 
 
     $('.textarea').append(words[counter] + " "); 
 
    } 
 
    counter++; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<textarea class='textarea'></textarea> 
 
<div class='changetext'> 
 
    Change text 
 
</div>