Question

I have multiple <textarea> generated dynamically with jQuery (.append).

When I append a new <textarea> I also add some <div class="action"> to them, so it look like this :

<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>

...

Now I would like to do add something inside the textarea when a User click on the div “action”

I’ve done this by :

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

The problem is that it only add once the "NEW TEXT" inside the <textarea> immediately before my div.

And when I click again on the ".action" div nothing happens so I would like to click many times on the .action div to add my NEW TEXT again and again

Any ideas?

Answer 1

The problem is with your line

.val($('textarea')

That is telling jQuery to find a textarea, not the textarea whose value you are modifying. Creating a local var inside the function should clarify it for you:

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