27286


動的に読み込んだ要素にjQueryプラグインを適用したいです。

[code]

    <div id="content">
    </div>
    
[/code]

上記の中に`<a class='tooltip'
href=...>link</a>`を動的に読み込んで追加し、そこにプラグインを適用させたいのですが、うまくいきません。

[code]

    $(function(){
      $("div#content").on("ready","a",function(){
        //イベントが発生しないためこの中は実行されない
        $("a.tooltip").tooltip();
      });
    });
    
[/code]

`click`イベントの場合は動作しますが、読み込み完了がうまく出来ません。  
御教示のほどお願いいたします。


CC BY-SA 3.0
2016-07-02T20:01:05.350
27279
2016-07-03T04:32:16.970
7966
question
javascript jquery
jQuery 動的に読み込んだDOM要素の表示完了時にjQueryプラグインを適用したい


雑に言うと[jQuery.ready](https://api.jquery.com/ready/)はピュアjsでいうところの[DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded)イベントにあたるタイミングで発火するものです→[参考](https://stackoverflow.com/questions/9899372/pure-
javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-
the)。つまりページ読み込み時のタイミングですから、今回のようにある要素に子要素が追加されたとき、などの処理とは異なります。  
この場合は、たとえば[jquery - on append() do
something](https://stackoverflow.com/questions/7167085/on-append-do-
something)で紹介されている方法などを用いて **要素の追加時に発火するイベントを設定する**
か、`動的に読み込んで追加`する処理のあとに、プラグインを適用する処理をおけばいいのではないでしょうか。  
応用的に様々な手段で要素が追加されることを考えると、私は前者がいいと思いますので、例では[MutationObserver](https://developer.mozilla.org/ja/docs/Web/API/MutationObserver)を用いた要素の監視により、追加時にプラグインの適用処理をしています。

[code]

    // 子要素の追加を監視
    var plugin = function (el) {
      // dummy
      el.textContent += ':plugin applied.';
    };
    var callback = function (e) {
      // 追加されたノードはe[0].addedNodesに入っている
      var added = e[0].addedNodes;
      // プラグイン適用
      for (var i = 0; i < added.length; i++) {
        plugin(added[i]);
      }
    };
    var observer = new MutationObserver(callback);
    observer.observe($('#container')[0], {childList: true});
    
    // 要素を動的に追加
    $("#append").click(function (e) {
      $("#container").append('<div>Child</div>');
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="container"></div>
    <button id="append">Append Child</button>
[/code]


CC BY-SA 3.0
2016-07-03T03:19:53.183
27286
2016-07-03T04:32:16.970
2017-05-23T12:38:55.307
-1
27279
answer