jQueryで要素が追加れたイベントを取得する

Question

jQueryでUL要素にLI要素が追加されたときに関数を実行する方法を教えて下さい

Answer 1

指定したコールバック関数を DOM の変更時に実行させる API です。

MutationObserver - Web API インターフェイス | MDN

Comments

[think49]

こちらを推します。
ただ、対象ブラウザが古かったら setInterval 監視も併用する必要があります。
http://caniuse.com/#feat=mutationobserver

[Lhankor_Mhy]

不勉強ですみません。
ご提示のものとの違いが分かりませんでした。

[Lhankor_Mhy]

あ、ターゲットブラウザによっては setInterval を使った方がよい、という補足をいただいたんですね。勘違いいたしました。重ねてすみませんでした。

[think49]

分かりにくい指摘ですみません。
例えば、IE9 が対象ブラウザに入るなら次のコードを併用する必要があると考えていました。
if (typeof MutationObserver !== 'function') {
　setInterval(function () {
　　// 対象の要素ノードを監視するコード
　}, 100);
}

[Lhankor_Mhy]

ご指摘感謝します。
「MutationObserver polyfill」で検索するといくつか出てくるようですね。

Answer 2

liを追加する事自体がjQueryに依存しているのであれば
その箇所に関数を実行する行を追記しておけばよいのでは？

追記

特定のトリガーで発火するなら、それと同じトリガーで処理を追加しておけばよいのでは？

<script>
$(function(){
  $('#btn').on('click',function(){
    $('#myUL').append($('<li>'));
  });
  $(document).on('click','#btn',function(){
    alert('test!');
  });
});
</script>

<input type="button" value="add" id="btn"><br>
<ul id="myUL">
<li>test</li>
</ul>

前者が元から設定されていれば、後者を追記する

さらに

<script>
$(function(){
  $('#add').on('click',function(){
    $('#myUL').append($('<li>'));
  });
  $('#del').on('click',function(){
    $('#myUL li:last-child').remove();
  });
});
$(function(){
  var myLen=$('#myUL li').length;
  setInterval(function(){
    if($('#myUL li').length > myLen){
      alert('test!');
    }
    myLen=$('#myUL li').length;
  },0);
});
</script>

<input type="button" value="add" id="add">
<input type="button" value="del" id="del"><br>
<ul id="myUL">
<li>test</li>
</ul>

あまりお勧めしませんが、#myULの子要素の数を数え続けて
変更があったときに実行するという処理もあります。
今回の場合不等号でチェックして追加時のみ発火させていますが
変化があったら常に実行する場合は!=などで対応してください

Comments

[yuta0801]

残念ながら実行しているのは別なので変更できないのです

[yambejp]

追記しておきました
トリガーを元に処理を追記するのがラクかと
ulにはonchangeは発生しないはずなので

Answer 3

こちらを推します。
ただ、対象ブラウザが古かったら setInterval 監視も併用する必要があります。
http://caniuse.com/#feat=mutationobserver

Comments

[think49]

Lhankor_Mhy さんにコメントするつもりで誤って回答してしまいました。
この回答は無視して下さい。