JQuery 동적 요소 - DOM에 있지만 바인딩 할 수 없습니다.

Question

저는 JQuery를 처음 사용하므로 저와 함께해야합니다.

내 페이지의 중첩 된 구조 내에서 일련의 div 태그를 단계별로 실행하고 각 페이지를 개별적으로 표시 할 수있는 온라인에서 찾은 js 파일을 기반으로 몇 가지 코드를 구현했습니다. 이 모든 기능은 div 태그를 마스터 페이지의 정적 항목으로 정의 할 때 유용합니다. 나는 이것이 SharePoint 마스터 페이지에서 구현되고 있다고 덧붙여 야합니다.

궁극적으로 div 태그의 정적 컬렉션에 이상적으로 설명 텍스트가있는 이미지와 하이퍼 링크가 매우 유연하지 않습니다. 이 설정을 조금 더 구성 가능하게 만들기 위해 변경 사항을 롤백하십시오. 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 태그를 주석 처리했습니다. 유일한 변화는 이러한 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> 

. 어떤 도움이라도 크게 감사 할 것입니다.

이에 대해 더 자세히 알려 드리고자합니다. 사전에

감사합니다,

을 부여 받았다 대답에 추가

: 나는 함수 호출을 수정 한이 :

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 init을 processResult 함수 끝으로 이동해야합니다.

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