0

私のページでは、非同期ページの読み込みのためにカラーボックス jQuery プラグインと AJAX の両方を使用しています。

AJAX を使用して .php ファイルから何かを取得した後、その .php ファイルのコンテンツがカラーボックスで機能しません。

$('a.boxed').colorbox({rel: 'Galleria'});
$('a.iframe').colorbox({iframe: true, width: "80%", height: "80%"});

これらは、カラーボックス用の .js ファイルにある 2 つの行のみです (プラグインは、AJAX からロードされていない他の要素で動作するため、正しくインポートしました)。一度クリックすると、次のコードを使用してカラーボックス iframe を開く画像を作成したかったのです。

<a href="MYURL" class="iframe"><img src="IMGURL"/></a>

Web ページのボタンをクリックすると、次のコードを使用して AJAX でリロードします。

function showPage(page) { var xmlhttp = new XMLHttpRequest(); // Creo 変数 XMLHttpRequest per il caricamento asincrono con AJAX

xmlhttp.onreadystatechange = function() {
    document.getElementById("post-title").innerHTML = page;
    document.getElementById("post-content").innerHTML = xmlhttp.responseText;
}

xmlhttp.open("GET", page + ".php", true);
xmlhttp.send();

}

live() メソッドを使用する必要があることを読みましたが、jQuery は非推奨であり、現在は on() メソッドがあることがわかりました。誰かが私を助けることができますか？

4

1 に答える 1

1

これを試して：

function showPage(page) { 
    var xmlhttp = new XMLHttpRequest(); // Creo variabile XMLHttpRequest per il caricamento asincrono con AJAX

    xmlhttp.onreadystatechange = function() {
        document.getElementById("post-title").innerHTML = page;
        document.getElementById("post-content").innerHTML = xmlhttp.responseText;
        $('a.iframe').colorbox({iframe: true, width: "80%", height: "80%"});  // <-- add this line
    }

    xmlhttp.open("GET", page + ".php", true);
    xmlhttp.send();
}

新しい要素をロードする前にイベント ハンドラーを追加すると、新しい要素はイベントを「受信」しません。

于 2012-12-06T17:29:56.337 に答える