changeイベントが発火されない

jQuery

環境

Rails(var. 5.2.4.1) ruby(var. 2.5.1)

したいこと

セレクトタグで選択した内容(今回の場合はカテゴリー)によってテキストエリアの内容を変えたい。 上の実装自体はできたのだが、ビューからテキストエリアの内容を書き換えた後にカテゴリーを変更しても、テキストエリアの内容が変わらない。

  1. カテゴリー1セレクト
  2. テキストエリア「カテゴリー１を選択しました」
  3. テキストエリアに文字を打ち込む
  4. カテゴリー2セレクト
  5. イベント発火せず

タグ

html
<div class='form'>
    <form class="new_memo" id="new_memo">
        <div class='field category'>
            <label for="memo_category">Category</label>
            <select name="memo[category_id]" id="memo_category_id">
                <option value="1">カテゴリー1</option>
                <option value="2">カテゴリー2</option>
            </select>
        </div>
        <div class='field content'>
            <label for="memo_content">Content</label>
            <textarea name="memo[content]" id="memo_content">
            </textarea>
        </div>
        <input type="submit">
    </form>
</div>
jQuery
$(document).on('change', '[name*="category_id"]', function(){
    var val = $(this).prop('selectedIndex');
    switch(val) {
    case  0:
    $('textarea').val('カテゴリー１を選択しました').change();
    break;
    case  1:
    $('textarea').val('カテゴリー２を選択しました').change();
    break;
    }
});

原因の考察

動的に追加した要素には普通に書くとイベントが発火しないらしい。 今回は特に要素を追加してはいないが、テキストエリアを書き換えることで要素が別のものとして判断されるのか...？ と複数の記事を参考に書き直してみるが特に変化なし。

原因・解決策

結果的には以下の記事を参考にした。

テキストボックスはval()で文字列を代入してもchange()イベントが動作しない仕様になっているらしい。 文字列代入後にchange()を実行すればイベントが発火されるとのことでそのように書き換える。

jQuery
$(document).on('change', '[name*="category_id"]', function(){
    var val = $(this).prop('selectedIndex');
    switch(val) {
    case  0:
    $('textarea').val('カテゴリー１を選択しました').change();
    break;
    case  1:
    $('textarea').val('カテゴリー２を選択しました').change();
    break;
    }
});

無事解決。