将动态数据附加到文本区域（手动编辑文本区域后脚本停止工作）

Question

我创建了从 json 动态创建列表的脚本。我制作了点击处理程序，它获取列表元素的值并将其附加到文本区域。

如果我不手动编辑 textarea，这会很好用。如果我这样做，数据将不再附加到 textarea。请看例子。

/* url 被作者删除 */

$(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());
    })

});

如有任何帮助，我们将不胜感激。

Answer 1

您需要更新文本区域值，例如：

$('.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;
    });
});

将动态数据附加到文本区域（手动编辑文本区域后脚本停止工作）

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

jquery

dynamic