0

DOMにHTMLを入力する呼び出しを#pageContent介してロードする単純なajax Webサイトを構築しています。php内のリンクには Fancybox を使用しています#pageContent。問題は、ファンシーボックスがもう機能せず、リンクがまったく機能しないにもかかわらず、別のページに移動するとファンシーボックスが正常に機能するホームページにあります。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

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();
});

これら 2 つのスクリプトでクラスと ID を変更する必要がありますが、適切なクラスと ID を取得すると、魅力的に機能します。

サイトは現時点ではアップしていませんが、近い将来、@ www.ppratl.com で表示される可能性があります。

于 2012-03-07T22:04:38.737 に答える
0

スクリプトに fancybox API オプションがあるため、fancybox v1.3.x を使用していると仮定します。そのバージョンは、動的に追加された要素をサポートしていません。これは、DOM にデータを入力する場合のケースです。

jQueryメソッドを使用して、fancybox を動的に追加された要素にバインドする同様の質問hereに回答しました。.on()

次のように、コンテナに合わせてコードを微調整します。

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

setTimeout...そして、物事を忘れてください。

于 2012-02-23T20:04:12.283 に答える