jQuery .append () no se agrega al área de texto después de editar el texto
Toma la siguiente página:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"/>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"/>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$(".hashtag").click(function() {
var txt = $.trim($(this).text());
$("#text-box").append(txt);
});
});
</script>
</body>
</html>
El comportamiento que esperaría y que quiero lograr es que cuando hago clic en uno de losdivs con clasehashtag
su contenido ("#one" y "#two" respectivamente) se agregará al final del texto entextarea text-box
.
Esto sucede cuando hago clic en las etiquetas hash justo después de que se carga la página. Sin embargo, cuando también empiezo a editar el texto entext-box
manualmente y luego vuelva a hacer clic en cualquiera de los hashtags que no se agregan en Firefox. En Chrome sucede lo más extraño: todo el texto que escribo manualmente se reemplaza con el nuevo hashtag y desaparece.
Probablemente estoy haciendo algo muy mal aquí, por lo que agradecería si alguien puede señalar mi error aquí y cómo solucionarlo.
Gracias.