JQueryの動的要素 - DOMではバインドできません

Question

私はJQueryを使い慣れていますので、私に同行してください。

オンラインで見つけたjsファイルに基づいていくつかのコードを実装しました。このコードでは、ページ上のネストされた構造内の一連のdivタグをステップスルーしてページ上に個別に表示できます。これはすべて、divタグをマスターページの静的なエントリとして定義すると効果的です。私はこれがSharePointのマスターページに実装されていると付け加えるべきです。

結局のところ、divタグの静的なコレクションでは、理想的には説明的なテキストを含むイメージとハイパーリンクはそれほど柔軟性がありません。これをもう少し設定可能にするために私の変更をロールオーバーしてください。私はリストのWebサービスへのajax呼び出しによってSharePointリストから読み込むいくつかの追加コードを実装しました。リスト内の各エントリに対して、動的に必要な情報を含むdivタグを作成しています。テストのために、私は現在のところタイトルを引っ張っています。

$('#beltDiv').append(divHTML) 

は、ページ上の私の入れ子構造に作成されたループにdivを追加する：

私は、次のコードを使用しています。私はこれがフェードコードを期待通りに機能させると思ったが、間違っていた。それはまったく何もしません。

ページのソースを確認すると、divタグは表示されません。ただし、IE開発ツールバーから表示すると、DOMモデルで使用できます。

問題は、divタグが利用できないため、featureFadeコードの開始が機能していないように見えます。これに対処する方法はありますか？使用されるコードを以下に示す：

<script type="text/javascript">   
$(document).ready(function() { 

    var soapEnv = 
     "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \ 
      <soapenv:Body> \ 
       <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \ 
        <listName>Carousel Items</listName> \ 
        <viewFields> \ 
         <ViewFields> \ 
          <FieldRef Name='Title' /> \ 
         </ViewFields> \ 
        </viewFields> \ 
       </GetListItems> \ 
      </soapenv:Body> \ 
     </soapenv:Envelope>"; 

    $.ajax({ 
     url: "_vti_bin/lists.asmx", 
     type: "POST", 
     dataType: "xml", 
     data: soapEnv, 
     complete: processResult, 
     contentType: "text/xml; charset=\"utf-8\"" 
    }); 

}); 

function processResult(xData, status) { 
    $(xData.responseXML).find("z\\:row").each(function() {   

    var divHTML = "<div id=\"divPanel_" + $(this).attr("ows_Title") + "\" class=\"panel\" style=\"background:url('http://devSP2010/sites/SPSOPS/Style Library/SharePointOps/Images/01.jpg') no-repeat; width:650px; height:55px;\"><div><div class=\"content\"><div><P><A style=\"COLOR: #cc0000\" href=\"www.google.com\">" + $(this).attr("ows_Title") + "</A></P><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P></div></div></div></div>"; 
    $("#beltDiv").append(divHTML);  

    }); 
} 

    featureFade.setup({ 
     galleryid: 'headlines', 
     beltclass: 'belt', 
     panelclass: 'panel', 
     autostep: { enable: true, moveby: 1, pause: 10000 }, 
     panelbehavior: { speed: 1000, wraparound: true }, 
     stepImgIDs: ["ftOne", "ftTwo", "ftThree", "ftFour","ftFive"], 
     defaultButtons: { itemOn: "Style Library/SharePointOps/Images/dotOn.png", itemOff: "Style Library/SharePointOps/Images/dotOff.png" } 
    }); 

divタグが動的に追加されるセクションを以下に示します。私は期待どおりに動作する静的なdivタグをコメントアウトしました。唯一の変化は、これらはjQueryのロジックによってimplmentedされていることである。

私はそれがDOMで動的に追加要素を認識していない理由として困惑

<div class="homeFeature" style="display:inline-block"> 
     <div id="headlines" class="headlines"> 
      <div id="beltDiv" class="belt"> 
       <!-- 
       <div id="divPanel_ct01" class="panel" style="position:absolute;background-image:url('http://devsp2010/sites/spsops/Style Library/SharePointOps/Images/01.jpg'); background-repeat:no-repeat">Static Test 1</div> 
       <div id="divPanel_ct02" class="panel" style="position:absolute;background-image:url('http://devsp2010/sites/spsops/Style Library/SharePointOps/Images/02.jpg'); background-repeat:no-repeat">Static Test 2</div> 
       --> 
      </div> 
     </div> 

。どのような助けも大いに評価されるでしょう。

これ以上の情報をお寄せいただきありがとうございます。事前に

おかげで、答え受け取っにさらに

グラント

：OK、これは簡単です、あなたのfeatureFadeオブジェクトはDOMの前に作​​成され

function processResult(xData, status) 
{ 
    $(xData.responseXML).find("z\\:row").each(
     function() 
     {   
      /*alert($(this).attr("ows_ImagePath"));*/ 
      var divHTML = "<div id=\"divPanel_" + $(this).attr("ows_Title") + "\" class=\"panel\" style=\"background:url('http://devSP2010/sites/SPSOPS/Style Library/SharePointOps/Images/ClydePort01big.jpg') no-repeat; width:650px; height:55px;\"><div><div class=\"content\"><div><P><A style=\"COLOR: #cc0000\" href=\"www.google.com\">" + $(this).attr("ows_Title") + "</A></P><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P></div></div></div></div>"; 
      $("#beltDiv").append(divHTML);  
     } 
    ); 

    featureFade.setup(
     { 
      galleryid: 'headlines', 
      beltclass: 'belt', 
      panelclass: 'panel', 
      autostep: { enable: true, moveby: 1, pause: 10000 }, 
      panelbehavior: { speed: 1000, wraparound: true }, 
      stepImgIDs: ["ftOne", "ftTwo", "ftThree", "ftFour","ftFive"], 
      defaultButtons: { itemOn: "Style Library/SharePointOps/Images/dotOn.png", itemOff: "Style Library/SharePointOps/Images/dotOff.png" } 
     } 
    ); 
} 

Answer 1

：私は、関数呼び出しを変更しました追加されます。

なぜですか？ processResultは非同期サーバーコールのコールバックなので、これを修正するにはfeatureFade initをprocessResult関数の最後に移動する必要があります。FYI

Answer 2

- SharePoint 2010のは、私はそれを見つけていないすべきか、そのコードを見て、教えカント

var clientContext = new SP.ClientContext("/"); 
var list = clientContext.get_web().get_lists().getByTitle('Carousel Items'); 
var q = "<View><ViewFields><FieldRef Name='Title'/></ViewFields></View>";  
camlQuery.set_viewXml(q); 
var listItems = list.getItems(camlQuery); 
clientContext.load(listItems, 'Include(Title)'); 
clientContext.executeQueryAsync(function(sender, args) { 
    var listEnumerator = listItems.getEnumerator(); 
    while (listEnumerator.moveNext()) { 
     var title = listEnumerator.get_current().get_item("Title"); 
     //do your stuff 
    } 
}, function(sender, args) { 
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); 
});