JQuery動態元素 - 在DOM中但無法綁定

Question

我是新來的使用JQuery，所以忍受着我。

我implmented基於這樣我在網上找到這使我的網頁上嵌套結構中的一系列div標籤的頁面上獨立步，並顯示每一個js文件的一些代碼。當我將div標籤定義爲主頁面中的靜態條目時，這一切都很好。我應該補充說這是在SharePoint主頁中實現的。

雖然最終與理想含有一些描述性文字圖像div標籤的靜態集合，和一個超鏈接它不是很靈活。滾動我的更改以使其更具可配置性。我已經實現了一些額外的代碼，這些代碼將通過對列表Web服務的ajax調用從SharePoint列表中讀取。對於列表中的每個條目，我正在構建一個包含動態所需信息的div標籤。對於測試，我目前只是通過標題。

我用下面的代碼：

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

到的div追加在創建我的嵌套結構頁面上的循環。我想這會導致淡入淡出的代碼按預期工作，但我錯了。它什麼都不做。

當檢查網頁上的來源，div標籤不顯示。但是，通過IE開發人員工具欄查看時，它們在DOM模型中可用。

問題（我認爲）看起來是該featureFade代碼的開始不因div標籤不可用的工作。有沒有辦法解決這個問題？所使用的代碼如下所示：

<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：

<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> 

我難倒，爲什麼它不承認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

確定這很簡單，你的featureFade對象的DOM之前創建被追加。

爲什麼？因爲processResult是一個異步調用服務器的回調，所以要解決這個問題，你需要將featureFade初始化移動到processResult功能的結束。

Answer 2

僅供參考 - SharePoint 2010中有一個新的客戶端對象模型，使調用Web服務輕鬆許多

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()); 
});