Question

我正在建立一个简单的ajax网站，通过#pageContent调用加载php，用HTML填充DOM。我在#pageContent内使用Fancybox作为链接。问题是在主页上，当我转到另一个页面时fancybox工作正常，虽然fancybox不再工作，链接根本不起作用。我已经尝试了setTimeout，pageLoad()以及许多其他想法的脚本。请有人帮助我，我为此疯狂：

以下是代码：

Ajax电话：

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

Answer 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

Answer 2

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

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

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

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

......忘了setTimeout的东西。

在PHP调用和DOM重新填充HTML之后，Fancybox没有在Ajax站点上工作

2 个答案: