JavaScriptは動的バインディングイベントに要素を挿入するには

動的に挿入HTMLページのコンテンツに、時には必要な実際のニーズ、以来、およびイベントハンドラ挿入されたノードをバインドします。私たちは、2つの方法がありますが、その内容はJavascriptとHTMLドキュメントに挿入されている知っています

一つは、JSにHTMLコードを記述し、文書に挿入することです。

代替的に、AJAX方法を介してサーバから取得したデータは、その後、処理後の文書に取得されたデータをJS。

両方の方法は、独自の特性を有し、文書内の新しい要素を分析し、この記事はイベントバインディング問題に挿入し、新たに挿入されたオブジェクトを想定しているが<a onclick="">と同様の形式ことなく、ある結合インラインイベント（ありません）。すべての例では、jQueryとネイティブJavascriptを使用します。

I：HTMLコードをJSに格納され、次のコードを参照してください。

    <BODY> 
    <P> 1行目</ P> 
    <P> 2行目</ P> 
    <P>最初の3行</ P> 
    <SCRIPT> 
    VAR appendhtml =のdocument.createElement（ "P"） ; 
    appendhtml.innerHTML = "これは挿入されたコンテンツである"; 
    document.body.appendChild（appendhtml）; 
    VAR NODEP document.getElementsByTagName =（ "P"）; 
    のため（I = 0 VAR; I <nodep.length; I ++）{ 
    NODEP [I] .onclick =機能（）{ 
    はconsole.log（ "イベントをクリックしてください！"）; 
    } 
    } 
    </ SCRIPT> 
    </ BODY>

ネイティブコード上、このコードが実行されるJavaScript、生成され、JSは、ページ上の第4のPタグを生成し、4つのラベルは、対応するアクションをトリガするときにクリックしてください。これは、HTMLコンテンツを生成したJSで、事件に対応するバインドすることができ、言うことではないでしょうか？答えがイベントを結合するために使用され、コードセクションの一つはHTMLコードセグメント2にコンテンツを挿入するために使用されるコードの二つのセクションが存在する、上記の、どのコードでスクリプトタグれていない場合、コード及びコードセグメントセクション2つのスワップポジションは、JSは、第4のPタグは、クリックイベントを結合しない生成を見つけます。次のコードは、jQueryを使ってテスト：

 
         $(function(){ 
        
         $("p").click(function(){ 
        
         console.log("Click Event"); 
        
         }) 
        
         $("< 
         p 
         >这是生成的内容</ 
         p 
         >").appendTo("body"); 
        
         })

調査結果は、あまりにも、イベントの実装の成功は、直接コード配列セグメントに関連しています。実際には、オリジナルの良い分析、コンテンツのニーズが挿入されていない場合、それはgetElementsByTagNameのか、jQueryのセレクタの使用であるかどうか、セレクタはまだ何も前の要素がイベントを結合しないされていないが存在し、存在するページ上の要素を選択します。

しかし、現実には仕事がイベントに結合後に、生成された要素を必要とし、イベントハンドラを登録することです。レビューの一定数以上の場合など、このサイトのメッセージングシステムの場合、最初の負荷はコメントだけで、駒の固定数が表示され、残りはAJAXの方法でロードされます。すべてのメッセージは、動的に、おそらくクリックイベントをバインドするために、メッセージをアップロードされた、ある、と返信機能はメールを登録している、復元することができ、対応するメッセージをクリックして、最終返信機能を持っています。もちろん、怠惰な方法は、AJAXコンテンツをロードしてからクリックを登録して、対応する機能をバインドすることであるが、それは、コードの冗長性が増加している、システムのオーバーヘッドが増加するだけでなく、コードを理解することは困難になります。だから、何より良いソリューションですか？

返信機能メッセージシステム

、単に、イベントバブリングと呼ばれる非常に重要な概念であり、限り、このページに属するすべてのページには、クロスドメインの要素が存在しないとして、イベントを結合することができる関わらず、JS、HTMLコンテンツのが生成されていない、JSを理解することができますイベントのサブ要素によって生成され、それは親要素、親要素の先頭にバブリングされていたであろうし、監視することができます。以下を参照してください。

イベントバブリング

まあ、私は親要素のバブリング素子で発生するイベントに挿入され、対応するコールバック関数を監視することはできませんか？答えはイエス間違いです。ページの内容は、JSコードの挿入で最後の顔であることに注意してください、次の例を考えてみましょう。

    <スクリプト> 
    $（関数（）{ 
     $（ "身体"）デリゲート（ "P"、 "クリック"、機能（）{。
        はconsole.log（ "イベントをクリックしてください"）; 
     }）
    $（ "<P>这是生成的内容</ P> "）appendTo（"本体"）; 
    }）
    </スクリプト>

これは、P要素のクリックのすべての出力を持っていたことが判明した、コードが正常に実行されます。ここでは、見て、jQueryの委任機能を使用する公式の説明：

1つまたは複数のイベントにハンドラをアタッチルート要素の特定のセットに基づいて、現在または将来において、セレクタに一致するすべての要素について。
特定のルート要素、指定された要素に登録された1つまたは複数のイベントによれば、かかわらず、この要素が存在するかどうか、今の。

上記jQuery1.7.3バージョンでは、これを行う方法について、公式の説明の例がありますが、ここではそれらを繰り返すありません。

クリックしたときに例えば、いくつかの例は、背景から前景に繰り返しアクセス動的なコンテンツがあり、数回をトリガーするだけでなく、$（「身体」）undelegate（）を使用し;.前のアンバインドすると、再び再バインドします。

 
         $( 
         "body" 
         ).undelegate(); 
        
         $( 
         "body" 
         ).delegate( 
         ".reply_check_btn" 
         ,  
         "click" 
         ,  
         function 
         () { 
        
         alert( 
         'adsadsa' 
         ); 
        
         });

JavaScriptは動的バインディングイベントに要素を挿入するには

I：HTMLコードをJSに格納され、次のコードを参照してください。

おすすめ