JQuery Dynamisches Element - In DOM, aber nicht binden

Question

Ich bin neu in der Verwendung von JQuery, also ertragen Sie mit mir.

Ich hatte Code basierend auf einer js-Datei, die ich online gefunden habe, die eine Reihe von div-Tags innerhalb einer verschachtelten Struktur auf meiner Seite ermöglicht, Schritt für Schritt und zeigen sie einzeln auf der Seite. Das alles funktioniert gut, wenn ich die div-Tags als statische Einträge in der Masterseite definiere. Ich sollte hinzufügen, dass dies in einer SharePoint-Masterseite implementiert wird.

Schließlich, mit einer statischen Sammlung von div-Tags, die idealerweise ein Bild mit beschreibendem Text und einen Hyperlink enthält, ist es nicht sehr flexibel. Übernehmen Sie meine Änderungen, um dies etwas konfigurierbarer zu machen. Ich habe zusätzlichen Code implementiert, der aus einer SharePoint-Liste über einen Ajax-Aufruf an den Listen-Webdienst liest. Für jeden Eintrag in der Liste baue ich ein Div-Tag, das die benötigten Informationen dynamisch enthält. Zum Testen ziehe ich derzeit nur den Titel durch.

Ich habe den folgenden Code verwendet:

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

die divs in der Schleife anzuhängen, die zu meiner verschachtelten Struktur auf der Seite erstellt werden. Ich dachte, dass dies dazu führen würde, dass der Überblendungscode wie erwartet funktioniert, aber ich lag falsch. Es macht überhaupt nichts.

Wenn Sie die Quelle auf der Seite überprüfen, werden die div -Tags nicht angezeigt. Sie sind jedoch im DOM-Modell verfügbar, wenn sie über die IE-Entwicklersymbolleiste angezeigt werden.

Das Problem (ich glaube) scheint zu sein, dass die Initiierung des FeatureFade-Codes nicht funktioniert, da die div-Tags nicht verfügbar sind. Gibt es eine Möglichkeit, dies anzugehen? Der verwendete Code ist unten dargestellt:

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

Der Abschnitt, wo die div-Tags dynamisch angehängt werden, ist unten dargestellt. Ich habe die statischen div-Tags auskommentiert, die wie erwartet funktionieren. Die einzige Änderung ist, dass diese durch die JQuery Logik implmented ist:

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

ich ratlos bin, warum es nicht die dynamisch hinzugefügt Elemente im DOM zu erkennen. Jede Hilfe würde hier sehr geschätzt werden.

Ich freue mich, weitere Informationen dazu zu geben.

Vielen Dank im Voraus,

Grant-

Im Anschluss an die Antwort erhält: Ich habe den Funktionsaufruf geändert habe:

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

ok das einfach ist, Ihr featureFade Objekt wird vor dem DOM erstellt ist angehängt.

warum? Da processResult Rückruf für einen asynchronen Serveraufruf ist, müssen Sie die featureFade-Init an das Ende der processResult-Funktion verschieben, um dies zu beheben.

Answer 2

FYI - Sharepoint 2010 hat ein neues Objektmodell-Client, der Aufruf Web-Services eine ganze Menge macht

leichter

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