Edit Question - KnowledgeHub

Title Body

Take the following page: <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> The behavior I would expect, and that I want to achieve is that when I click on one of the divs with class hashtag their content ("#one" and "#two" respectively) would be appended at the end of the text in textarea text-box . This does happen when I click on the hash tags just after the page loads. However when I then also start editing the text in text-box manually and then go back to clicking on any of the hashtags they don't get appended on Firefox. On Chrome the most bizarre thing is happening - all the text I type manually gets replaced with the new hashtag and disappears. I probably am doing something very wrong here, so I would appreciate if someone can point out my mistake here, and how to fix that. Thanks.

Tags (comma-separated) Cancel