[JS] changeトリガーを最初に実行する

Question

いつもお世話になっています。

javascriptに関して毎回疑問になるところがあったので質問です。

$('#hoge').change(function() {                 // hogeセレクトボックスが変動したら
    $('#fuga').append('<span>piyo</span>');    // #fugaにspanで囲んだpiyoを追加する
});

よく上記のようなコードを書くのですが（大分はしょってますが）
このjsを読み込んだ際に最初はchangeトリガーがなくとも実行して欲しい場合が多いです。

毎回は以下のように対処しています。（めちゃくちゃ汚いと思っています。）

addPiyo();
$('#hoge').change(function() {
    addPiyo();
});

function addPiyo() {
    $('#fuga').append('<span>piyo</span>');
}

この際の通常の対処の仕方を教えて欲しいです。
いまいちどう調べたらいいのかわからず止まっています。
よろしくお願いいたします！

Answer 1

（めちゃくちゃ汚いと思っています。）

むしろ、やりたいことがはっきりするのでこの形のほうがいいのかなと思っています。

.trigger('change')で無理やりイベントを動かす方法もありますが、他に付けたchangeイベントも動いてしまうために、かえって煩雑化する危険があります。

Comments

[satorushimo]

なるほど、実際今のままの方がコードとしてはわかりやすいんですね。。

[退会済みユーザー]

'change.hoge'のようにイベントに名前空間を設定して、triggerするときも「.trigger('change.hoge')」のようにすることで、複数のchangeイベントが定義されていても、対象のchangeイベントしか発生しないように出来ます。

[maisumakun]

あとでこのイベントだけ外したい場合も、（名前空間を使う場合を除けば）関数を別途で宣言して、その関数を指定して外すことになるので、イベントセットの関数に直書きしない、ということもよくあります。

Answer 2

ようは初期処理をしたいということですよね
すでに回答がありますがtriggerを実行するするのが一般的です

<script>
$(function(){
  $('#hoge').on('change',function(){
    $('#fuga').append('<span>piyo</span>');
  }).trigger('change');
});
</script>
<select id="hoge">
<option value="">--</option>
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
</select>
<div id="fuga"></div>

addPiyo()

逆に値の引き渡しなど煩雑になるので良し悪しあると思います