如何从ajax加载的页面上获取YouTube API的数据?

时间:2013-05-09 12:37:54

标签: jquery ajax facebook youtube-api

我正在使用以下代码来简单地从特定的YouTube视频中获取一个视图计数,并将其放入带有ID的div:ytviews:

var video_id='gRcGLk6izZ0';
$.getJSON('http://gdata.youtube.com/feeds/api/videos/'+video_id+'?v=2&alt=jsonc',function(data){
document.getElementById('ytviews').innerHTML = (data.data.viewCount);
});

Example

这是我的问题:

我放置视图计数的div驻留在通过AJAX加载的页面上。因此,当我在加载AJAX时访问页面时,视图计数不显示。

这是AJAX代码:

$(function () {
    var b = "",
        a = $("#main-content");
    $("#page-wrap");
    $(document).delegate(".dyn a", "click", function () {
        window.location.hash = $(this).attr("href");
        return !1
    });
    $(window).bind("hashchange", function () {
        String.prototype.toTitleCase = function (b) {
            var a = this;
            1 !== b && (a = a.toLowerCase());
            return a.replace(/\b[a-z]/g, function (a) {
                return a.toUpperCase()
            })
        };
        b = window.location.hash.substring(1);
        document.title = window.location.hash.replace("#", "").replace(/[_]/g, " ").replace(".html", "").replace("and", "+").toTitleCase();
        b && a.find("#guts").fadeOut(200, function () {
            a.hide().load(b + " #guts", function () {
                a.fadeIn(200);
                $(".dyn a").removeClass("current");
                $(".dyn a[href=" + b + "]").addClass("current")
            })
        })
    });
    $(window).trigger("hashchange")
});

我在Facebook上遇到了同样的问题,我使用以下代码解决了这个问题,以便在将AJAX内容插入DOM后重新解析FBML:

$(document).ajaxComplete(function(){
    try{
        FB.XFBML.parse(); 
    }catch(ex){}
});

我已经尝试将我的视图计数代码放在这个ajaxComplete解决方案中,除了它使Facebook链接变得疯狂并在页面中闪现之外。

任何人都可以帮助我理解如何在加载AJAX内容后成功加载。

提前致谢!

1 个答案:

答案 0 :(得分:1)

load回调中,您可以添加$ .getJSON:

    ...
    b && a.find("#guts").fadeOut(200, function () {
        a.hide().load(b + " #guts", function () {
            a.fadeIn(200);
            $(".dyn a").removeClass("current");
            $(".dyn a[href=" + b + "]").addClass("current");
            $.getJSON('http://gdata.youtube.com/feeds/api/videos/'+video_id+'?v=2&alt=jsonc',function(data) {
                  $('#ytviews').html(data.data.viewCount);
            });
        })
    })
    ...