CODEWITHSUNDEEP
jquerydynamic
be-codified
be-codified

Reputation: 6144

appending dynamic data to textarea (script stops working after manually editing textarea)

I have created script which dynamically creates list from json. I have made on click handler, which takes value of list element and appends it to textarea.

This works just fine if I am not manually editing textarea. If I do that, data is not appended anymore to textarea. Please see example.

/* url removed by author */

$(document).ready(function() {

    // getting snippets
    $.getJSON('assets/snippets/default.json', function(data) {  
        $.each(data, function(key, val) {
            $('.snippets-list').append(
                '<li><a class="snippet" href="#">' + val + '</a></li>'
            );

            console.log(key + "value: " + val);
        });
    });

    // adding snippet to composed text
    $('.snippets-list').on('click', '.snippet', function(event) {
        event.preventDefault();
        console.log('I have been clicked.');
        $('.composed-text').append($(this).html());
    })

});

Any help would be appreciated.

Upvotes: 1

Views: 132

Answers (1)

A. Wolff
A. Wolff

Reputation: 74410

You need to update the textarea value, e.g:

$('.snippets-list').on('click', '.snippet', function (event) {
    event.preventDefault();
    console.log('I have been clicked.');
    var txt = $.trim($(this).html());
    $('.composed-text').val(function () {
        return this.value + txt;
    });
});

Upvotes: 1

Related Questions