動的に追加されたコンテンツは、jQueryの

Question

私は動的にAJAX呼び出しを経由して、HTML生成パッシングAMで標的にすることができない、

をたまたま今

var loadContent = function(){ 

    $.ajax({ 
     url: '/url', 
     method: 'GET' 
    }).success(function (html) { 

     $('.content-wrapper').replaceWith(html); 

    }) 

    //this is how simple returned html looks like 
    //<div class="content-wrapper"><ul"><li>test</li></ul></div> 

}; 

の下に簡単な例を参照してください

var testAjaxGeneratedHtml = function() { 
    loadContent(); 
    $('.content-wrapper ul li').addClass('test'); 
} 

Answer 1

AjaxはAjaxがそのタスクを完全

var loadContent = function(){ 

    $.ajax({ 
     url: '/url', 
     method: 'GET' 
    }).success(function (html) { 

     $('.content-wrapper').replaceWith(html); 
     $('.content-wrapper ul li').addClass('test'); 


    }) 

    //this is how simple returned html looks like 
    //<div class="content-wrapper"><ul"><li>test</li></ul></div> 

}; 

を行った後、それはとても成功関数内クラスを追加し、応答を待ちません非同期要求であります

Answer 2

ニティンの答えが正しいですが、私は、私はもう少し説明を追加することができます感じた...

ほとんどのJavaScript関数は同期している - 各ステップは次の1を開始する前に完了しなければなりません。 Ajaxはリクエストとレスポンスで構成されているため、Ajaxは異なります。リクエストを送信し、リスナーを設定してレスポンスを待機し、リスナーが来たらそれを処理します。このリスナーが作成されると、応答がまだ保留中の間もコードを実行し続けることができます。

あなたの場合は、応答が返ってくる前にリクエストを送信してからDOMを操作しています。おそらく数秒後に応答が到着し、あなたの「成功」機能がそれを処理し、これはあなたが瞬時に達成したものを上書きします。$('.content-wrapper ul li').addClass('test');

おそらく最も良い解決策はNitinが示唆したようにして、あなたには、いくつかの理由でtestAjaxGeneratedHtmlの内側にそれを行う必要がある場合successハンドラは、しかし、あなたは関数として定義することができます

注：未テストコードを

var loadContent = function(onSuccess){ 

    $.ajax({ 
     url: '/url', 
     method: 'GET' 
    }).success(function (html) { 

     $('.content-wrapper').replaceWith(html); 
     onSuccess(); 

    }) 

    //this is how simple returned html looks like 
    //<div class="content-wrapper"><ul"><li>test</li></ul></div> 

}; 

var testAjaxGeneratedHtml = function() { 
    loadContent(function() { $('.content-wrapper ul li').addClass('test'); }); 
}