DOM要素の作成をキャッチしてjQueryで操作する方法

私はクラスといくつかのdata- *を持つ単純なdiv要素を追加するときに、それを置き換えるか、いくつか追加する方法を考案しようとしています他の要素。このメソッドは手作業で呼び出すのではなく、何らかの.live（）jQueryメソッド、カスタムイベントまたは$（ 'body'）などのようなものによって自動的に呼び出されるべきです。bind（ 'create.custom'）など私はそれが必要ですこの方法は、あらかじめ空のdivやpのようなajaxを介して提供されるため、どの要素が作成されるかを事前に知ることができないためです。DOM要素の作成をキャッチしてjQueryで操作する方法

<!DOCTYPE html> 
<html> 
    <head> 

     <title >on create</title> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> 

     <script type="text/javascript" > 

      jQuery(function($){ 
       $("div.fancyInput").each(function(index,element){ 

        var $div = $(this); 
        var dataId = $div.attr("data-input-id"); 
        var inputId = ''; 
        var labelId = ''; 
        if(!!dataId){ 
         inputId = 'id="' + dataId + '"'; 
         labelId = 'id="' + dataId + 'Label"'; 
        } // if 

        var dataValue = $div.attr(); 

        $(
         '<p class="fancyInput" >' + 
         ' <label ' + labelId + ' for="' + inputId + '" >A fancy input</label>' + 
         ' <input ' + inputId + ' name="' + inputId + '" value="A fancy input" />' + 
         '</p>' 
        ).appendTo($div);    
       }); // .each() 
      }); // jQuery() 
     </script> 

     <script type="text/javascript" > 

      jQuery(function($){ 
       var counter = 2; 
       var $form = $('#form'); 
       $('#add').click(function(event){ 
        $('<div class="fancyInput" data-input-id="fancyInput' + counter + '" ></div>').appendTo($form); 
        counter++; 
       }); // .click 
      }); // jQuery() 

     </script> 
    </head> 
    <body> 

     <a id="add" href="#" > add another one </a> 
     <form id="form" action="#" > 

      <p class="normalInput" > 
       <label id="normalInputLabel" for="normalInput" >A normal input</label> 
       <input id="normalInput" name="normalInput" value="A normal input" /> 
      </p> 

      <div class="fancyInput" ></div> 

     </form> 
    </body> 
</html>

アップデート：私は事前にliveQueryを確認 は、それがなく、イベントコールバックが実行されながら、DOM要素を変更する機能を持つ、私は必要な機能のようなものです。だから、イベントを添付するだけではなく、要素作成時にDOMを変更する機能も必要です。たとえば、新しいものが作成されたときは、p、label、およびinputタグで埋め尽くさなければなりません（置き換えた方が良いでしょう）

出典

2011-02-06 Azder

DOMNodeInsertedのようなDOMレベル3イベントを使用できます。これは次のようになります。別の方法として

$(document).bind('DOMNodeInserted', function(event) { 
    // A new node was inserted into the DOM 
    // event.target is a reference to the newly inserted node 
});

、あなたは.liveQuery^help jQueryプラグインをチェックアウトすることがあります。

更新あなたのコメントにreferrenceで

は、http://www.quirksmode.org/dom/events/index.htmlを見て、それがこの世界のインターネット探検をしているサポートしていないだけで、ブラウザを持っている（私はIE9は、少なくともないと思います）。

パフォーマンスについてはあまり言えませんが、かなりうまくいくはずです。

出典

2011-02-06 19:01:21 jAndy

私はどこか遅いと読んで、すべてのブラウザでサポートされていない可能性があります。 – Azder

質問：代わりに '.live（）'を使って挿入された要素に直接バインドした方が速く/良いでしょうか？ – Victor

@ Victor：あなたが達成したいことに依存します。特定のイベントだけでイベントハンドラを使いたい場合は、** .live'や '.delegate'を使うべきです**しかし、新しく挿入されたノード上の特定のメソッドを呼び出す場合は、私は提案した。 – jAndy

DOM要素の作成をキャッチしてjQueryで操作する方法

答えて

関連する問題