1

我想将锚标记动态添加到div="myDiv".
只要我没有将它包含在另一个潜水中，它就可以正常工作data-role="page"。
我想将它包含在一个页面中，以便可以将其称为按钮链接上的页面。可能是什么问题。
下面是代码。

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
        <!--<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script> -->
        <style>
            figure{
                float:left
            }
            figcaption{
                font-size: small;
            }
            img {
                float:left; 
            }
            a {
                color: black;
                text-decoration: none;
            }
            a:hover {
                color:black; 
                text-decoration:none; 
                cursor:pointer;  
            }
        </style>        
    </head>
    <body>
        <div data-role="page">   //remove this and it will start working.
            <div data-role="div" id="myDiv" ></div>
            <div data-role="popup" id="popupMap1" class="ui-content" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15"></div>
        </div>
        <script>
            function play(id){
                document.getElementById("popupMap1").innerHTML="<a href='#' data-rel='back' data-role='button' data-theme='a' data-icon='delete' data-iconpos='notext' class='ui-btn-right'>Close</a><iframe src='http://www.youtube.com/embed/"+id+"' width='480' height='320' seamless='' id='plyerIframe1'></iframe>";                    
            }
        </script>
        <script type="text/javascript" 
        src="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=today&alt=json-in-script&callback=showMyVideos2&max-results=15&format=5">
    </script>
    <script type="text/javascript">
        var title=new Array();
        var thumbnailUrl=new Array();
        var playerUrl=new Array();
        var mydiv = document.getElementById("myDiv");
        var duration=new Array();
        var views=new Array();
        var idi=new Array();

        function showMyVideos2(data) {
            var feed = data.feed;
            var entries = feed.entry || [];
            var html = ['<ul class="videos">'];

            for (var i = 0; i < entries.length; i++) {
                var entry = entries[i];
                title[i] = entry.title.$t.substr(0,20);
                thumbnailUrl[i] = entry.media$group.media$thumbnail[0].url;
                playerUrl[i] = entry.media$group.media$content[0].url;
                duration[i]= entry.media$group.media$content[0].duration;
                views[i]= entry.yt$statistics.viewCount;
                var aTag = document.createElement('a');
                aTag.setAttribute('href','#popupMap1');
                aTag.setAttribute('data-rel','popup');
                aTag.setAttribute('data-position-to','window');
                aTag.setAttribute('data-theme','b');
                aTag.setAttribute('data-inline','true');

                //idi[i]=playerUrl[i].substring(25,36);
                idi[i]=entry.media$group.yt$videoid.$t;

                aTag.innerHTML ="<figure  onclick='play(idi["+i+"])'><figcaption>"+title[i]+"...</figcaption><img src="+thumbnailUrl[i]+"  width='200px' height='150px' ><footer>Duration: "+duration[i]+" seconds<br><span>Total Views: "+views[i]+"</span></footer></figure>" ;
                mydiv.appendChild(aTag);    
            }                   
        }       
        </script>
    </body>
</html>
4

1 回答 1

1

我已经为您的问题制作了一个jsFiddle解决方案。

解释：

当您使用data-role="page"div 时，您正在使用 jQuery-Mobile 框架，该框架将对 DOM 执行一些操作，重新排列一些元素。我不会对此进行更深入的讨论，因为我真的不确定幕后到底发生了什么，但似乎正在发生的事情是 jQuery-Mobile 在 youtube 脚本尝试时尚未完成页面渲染打电话showMyVideos2。

因此，我删除了<script>包含该脚本的标记，而是添加了以下 javascript 代码：

$(document).on('pageshow', function() {
    $.getScript("http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=today&alt=json-in-script&callback=showMyVideos2&max-results=15&format=5");
});

关于这件事你应该知道两件事：

  1. 我已将此代码放在pageshow事件的回调中，以确保 jQuery-Mobile 在您开始任何 DOM 操作之前已完成它需要在页面上完成的所有工作。其他 jQuery-Mobile 事件，例如pagechangeandpagecreate也会起作用。

  2. 我使用 jQuery 的getScript()方法加载了 youtube 脚本，该方法允许您动态检索外部脚本并执行它。它实际上只是 $.ajax() 方法以下情况的简写符号：

    $.ajax({
  url: "http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=today&alt=json-in-script&callback=showMyVideos2&max-results=15&format=5",
  dataType: "script"
});
于 2012-11-29T14:44:37.390 回答