为什么使用jQuery函数追加插入文本时文本区域冻结

Question

我正在尝试从下拉列表（#note_template）的文本区域（#note_text）中插入一些内容。用户应该能够在使用键盘键入字符之间将许多项目插入文本区域。类似于从要放入消息中的表情符号集合中进行选择。

当以以下方式完成时，文本区域可以在键入后接收项目。

function update1() {
    $txt = $("#note_text").val() + $("#note_template option:selected").val() ;
    $("#note_text").val($txt);
$("#note_template").val("");
}

但是，当按以下方式完成时，文本区域的内容在键入后不会更新。只有在输入之前，我才能从下拉列表中插入项目。

function noteTempalteSelected() {
    $("#note_text").append( $("#note_template option:selected").val() );
    $("#note_template").val("");
}

因此，似乎使用append会导致文本区域冻结。谁能解释为什么？谢谢。

Answer 1

好的，

我想我知道这里发生了什么。为了使追加正常工作，该元素应该在 jquery 中具有 innerHTML 属性或 html（）。文本区域就像输入一样具有 val（） 属性。因此，要使其正常工作，您应该尝试以下操作：

 $('#note_template').on('click', 'option:selected', function(e){
   var txtArea = $('#note_text');
   txtArea.val(txtArea.val() + $(this).val());
   $(this).val(''); 
 });

[

演示在这里][1]