Question

我想动态地将锚标记添加到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>

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

你应该知道两件事：

我已将此代码放入pageshow事件的回调中，以确保jQuery-Mobile在您开始任何DOM操作之前已完成它在页面上需要完成的所有工作。其他jQuery-Mobile事件（例如pagechange和pagecreate）也可以使用。
我使用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"
});
```

使用data-role =“page”将div封装在div中后，无法动态添加锚标记

1 个答案:

说明：