0

#pageContent我正在构建一个简单的 ajax 网站，该网站通过php使用 HTML 填充 DOM 的调用加载。我正在使用 Fancybox 作为#pageContent. 问题出在主页上，当我转到另一个页面时，fancybox 工作正常，尽管 fancybox 不再工作并且链接根本不起作用。我已经将脚本移动到了 try setTimeout、pageLoad()和许多其他想法。请有人帮助我，我为此发疯：

这是代码：

阿贾克斯调用：

var default_content="";

$(document).ready(function(){

checkURL();
$('ul li a').click(function (e){

        checkURL(this.hash);

});

//filling in the default content
default_content = $('#pageContent').html();


setInterval("checkURL()",250);


});
var lasturl="";

function checkURL(hash)
{
if(!hash) hash=window.location.hash;

if(hash != lasturl)
{
    lasturl=hash;

    // FIX - if we've used the history buttons to return to the homepage,
    // fill the pageContent with the default_content

    if(hash=="")
    $('#pageContent').html(default_content);

    else
    loadPage(hash);
}
}


function loadPage(url)
{
url=url.replace('#page','');

$('#loading').css('visibility','visible');

$.ajax({
    type: "POST",
    url: "load_page.php",
    data: 'page='+url,
    dataType: "html",
    success: function(msg){


        if(parseInt(msg)!=0)
        {
            $('#pageContent').html(msg);
            $('#loading').css('visibility','hidden');
        }
    }

});

}

Fancybox 脚本火：

$(document).ready(function(){
    $(".extLink").fancybox({
         'width' : '75%',
         'height' : '100%',
         'autoScale' : false,
         'transitionIn' : 'elastic',
         'transitionOut' : 'fade',
         'type' : 'iframe'
     });

});

问题链接如下：

http://dev.abdemo.net/perfectparties

4

2 回答 2

1

好的，所以我想通了：

在进行 AJAX 调用的脚本文件上，在成功的情况下，您将每个文件附加到头部，如下所示：

function loadPage(url)
{
    url=url.replace('#page','');

    $('#loading').css('visibility','visible');

    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page='+url,
        dataType: "html",
        success: function(msg){



            if(parseInt(msg)!=0)
            {
                $('#pageContent').html(msg);
                $('#loading').css('visibility','hidden');
            }
            $('head').append('<link type="text/javascript" src="jquery-1.3.2.min.js" />');
            $('head').append('<link rel="stylesheet" href="deckfire.css" type="text/css" />');
            $('head').append('<link type="text/javascript" src="slidedeck.jquery.js" />');
            $('head').append('<link type="text/javascript" src="deckfire.js" />');

        }

    });

}

然后，这是使它工作的唯一方法：

将此脚本添加到 DOM 中加载的每个 html 文件的底部：

$(document).ready(function(){
    if (jQuery.browser.safari && document.readyState != "complete"){
        setTimeout( arguments.callee, 100 );
        return;
    }
    window.Deck = $('.slidedeck').slidedeck();
});

您将不得不更改这两个脚本中的类和 ID，但是一旦您在其中获得了正确的类和 ID，它就像一个魅力

网站目前尚未启动，但您可能会在不久的将来看到它@www.ppratl.com

于 2012-03-07T22:04:38.737 回答
0

因为您的脚本中有fancybox API 选项，所以我假设您使用的是fancybox v1.3.x。该版本不支持动态添加的元素，这是您填充 DOM 时的情况。

我在这里回答了一个类似的问题，它使用jQuery.on()方法将fancybox绑定到动态添加的元素。

调整代码以匹配您的容器，例如：

$("#pageContent").on("focusin", function(){...

...忘记这些setTimeout东西。

于 2012-02-23T20:04:12.283 回答