0

ajaxによってロードされたページでスクリプトを実行するにはどうすればよいですか?

jquery.load を使用すると、すべてのスクリプト コードが削除されるという事実は、非常に厄介です。AJAX を使用しようとしているので、ページ全体をリロードする必要はありません。

スクリプト、現在:

$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('#nav li a, #nav-top li a, #nav-left li a, #nav-right li a').not('.scroll').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-4)){
        var toLoad = hash+'.php #content';
        $('#content').load(toLoad)  
    }                                           
});



$('#nav li a, #nav-top li a, #nav-left li a, #nav-right li a').not('.scroll').click(function(){  

    var toLoad = $(this).attr('href')+' #content>*';  // there must be a blank space in ' #content>*'
    $('#content').hide(888,loadContent);  
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn(888);
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
    function loadContent() {
        $('#content').load(toLoad,'',showNewContent())  
    }
    function showNewContent() {
        $('#content').show(888,hideLoader());  
    }
    function hideLoader() {
        $('#load').fadeOut(888);
    }

    return false;

});

});

ここで動作するデモの例のページ:

http://www.ideagasms.net/index2 ('home' と 'about' のリンクをクリックするだけで、動作を確認できます。)

jquery はすべて、縮小された 3 つのファイルに格納されています。それらには、php/jquery ショッピング カート、lazyload、lightbox などが含まれます。たとえば、「カートに追加」ボタンや img.lazyload を #content div に追加したときに、それらが引き続き機能するように、3 つの主要な js ファイルをすべて「存続」させたいと考えています。

livequery プラグインはまともな解決策だと聞いたことがありますが、それは私の頭をはるかに超えており、やり過ぎのように思えます。

上記のスクリプトを変更して one.min.js two.min.js と three.min.js を含め、それらを「再トリガー」してアクティブなままにする方法が必要です。

この質問が大したことなら、これを理解できる人なら誰でも喜んで雇います。その後、ここにソリューションを再投稿できます。（私が尋ねているこの質問は、上記の「jqueryを使用してコンテンツをロードしてアニメーション化する」スクリプトを入手したメインのnettutsページを含む、いたるところで尋ねられており、解決策はほとんどの人を回避していますが、一部の人はなんとか修正できましたこれは、私は彼らのソリューションを実装する方法を理解することはできません. これを一度に解決できる人は誰でも、何百人もの欲求不満の人々を一度に助けるでしょう. nettutsチュートリアルを使用してまったく新しいサイトを構築すると、1週間しかわかりません.スクリプトが関連付けられているコンテンツをロードするのは良くないという仕事に...それは非常にイライラします.)

4

2 に答える 2

0

これを試してください（暗闇で撮影）。

$('body').on('click', '#nav li a, #nav-top li a, #nav-left li a, #nav-right li a', function() {
    if (this.hasClass('scroll')) { return; }

    var toLoad = $(this).attr('href') + ' #content>*'; // there must be a blank space in ' #content>*'
    $('#content').hide(888, loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn(888);
    window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 4);

    function loadContent() {
        $('#content').load(toLoad, '', showNewContent())
    }

    function showNewContent() {
        $('#content').show(888, hideLoader());
    }

    function hideLoader() {
        $('#load').fadeOut(888);
    }

    return false;

});​
于 2012-09-28T02:08:26.793 に答える
0

理論的には、ページが整形式であれば、Ajax 呼び出しから JS コードを取得する必要はありません。Ajax 呼び出しは、データ ( JSON、XML、その他のタイプのデータ、または特定の領域のHTMLの一部など) を返すために使用されます。

最初に読み込まれたページに JS スクリプトを配置する必要があります。

本当にスクリプトをロードする必要がある場合は、新しいスクリプト ノードを作成し、それらを DOM ドキュメントの先頭に配置できます (ロードする適切な JS スクリプトへのパスを含む Ajax 応答データを想定しています)。

于 2012-09-28T04:18:27.723 に答える