jQueryのchangeがdocument.getElementById().valueで上書きしたときに発火しない

Question

ボタンを押したとき，
・textareaに文字列(例ではBUTTON)を追加
・それに応じて<p>にtextareaと同じ文字列を表示
させたいです．

<input type="button" onClick="myfunc()">
<textarea id="textarea"></textarea>
<p id="p"></p>

function myfunc(){
  document.getElementById("textarea").value += "BUTTON";
}

/*jQuery*/
$(function(){
    $("#textarea").change(function() {
        var text = $(this).val();
        $("#p").text(text);
    });
});

現状では，textareaに直接入力したときには<p>に反映されるのですが，ボタンを押した際のtextareaの変更時には<p>に反映されません．

アドバイスなどいただければ幸いです．
よろしくお願いいたします．

Answer 1

JavaScriptコードでDOMノードに変更を加えても、changeイベントは発火しない仕様です。
必要なら、textarea要素のvalueプロパティを書き換える際に、trigger() でchangeイベントを発火させて下さい。

• .trigger() | jQuery API Documentation

Re: Sharon2434 さん

Comments

[Sharon2434]

ご回答ありがとうございます．
trigger()を少し試してもうまくいかなかったのですが，
具体的に，質問文の例ではどこをどのように変えればよいのでしょうか．
お手数をおかけしますがよろしくお願いいたします．

[think49]

textarea要素のvalueプロパティを書き換える際に、trigger()でchangeイベントを発火させてください。

[Sharon2434]

ご助言のおかげで解決いたしました．
ありがとうございました．