Insert value of bootstrap button into textarea doesn't work after click on textarea

Question

I'm using a bootstrap popover wich appears by clicking on a button. In this popover again there're another buttons with different values, like this one.

<button type="button" class="btn btn-default conditions topList" value="move();" id="move">move</button>

My aim is to insert the value of these buttons into a textarea. For that I'm using the following jQuery:

$(document).bind("click", function(e) {
  if ((e.target.value != undefined) && (e.target.id != "textarea"))
    $('#textarea').append(e.target.value+'\n');
});

Because I want a line skip after each button's value I append an '\\n'. To ensure that only the values of the buttons are going to be insert into textarea, I avoid to append a value if it's undefined, like when I'm clicking anywhere on the document, where's no button. So do I by clicking on the textarea. Without that there'd be a line skip every time i click on the textarea.

Well, inserting the values works fine, BUT only when I'm not going to click into the textarea. After I clicked once into the textarea, there'll be no reaction by clicking on the buttons. Same story, when I manually clear the textarea with $('#textarea').val('') After that, nothing happens by clicking the buttons.

Any idea?

Answer 1

Thx for the hint with the .val() .

I changed the $('#textarea').append(e.target.value+'\\n'); to $('#textarea').val($('#textarea').val() + e.target.value+'\\n');

Now it's working!