Несколько событий в одном классе с JQuery

Question

У меня есть несколько <textarea>, сгенерированных динамически с помощью jQuery (.append).

Когда я добавляю новый <textarea>, я также добавляю к ним немного <div class="action">, поэтому это выглядит так:

<textarea>...</textarea>
<div class="action">Click to add action to text areas</div>

<textarea>...</textarea>
<div class="action">Click to add action to text areas</div>

<textarea>...</textarea>
<div class="action">Click to add action to text areas</div>

...

Теперь я хотел бы добавить что-то внутри текстовой области, когда пользователь нажимает на div "action"

Я сделал это:

$(document).on("click",".action", function() //this will apply to all anchor tags
{ 
        $(this).prev('textarea')
        .val($('textarea')
        .val() + 'NEW TEXT');  
});

Проблема в том, что он только один раз добавляет "NEW TEXT" внутрь <textarea> непосредственно перед моим div.

И когда я снова нажимаю на ".action" div, ничего не происходит, поэтому я хотел бы много раз нажимать на .action div, чтобы снова и снова добавлять мой НОВЫЙ ТЕКСТ

Есть идеи?

Answer 1

Проблема в вашей строке

.val($('textarea')

Это говорит jQuery о поиске текстовой области, а не текстовой области, значение которой вы изменяете.Создание локальной переменной внутри функции должно прояснить ее для вас:

$(document).on("click", ".action", function() { 
    var $ta = $(this).prev('textarea');
    $ta.val($ta.val() + "\nNew Text");
});