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逻辑实现的：

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

JQuery动态元素 - 在DOM中但无法绑定

2 个答案: