0

私はサイトhttp://teneo.telegraphbranding.com/に取り組んでおり、サイドバーとそのアニメーションの一貫性が保たれるように、ajax を介してページをロードしたいと考えています。

「About」リンクをクリックすると、jquery ajax 関数を介して about2.php をロードする必要があります。しかし、私は運がありません。ページをajax経由でロードできると、ページ上のすべてのjquery機能が強制終了されます。私が読んだことから、ajax呼び出しが正常に完了したらjqueryを呼び出す必要があると思います。

私は思われるすべてを試しましたが、うまくいきません。私が必要とするのは、リンクがクリックされたときにロードする about2.php と、ホームページのように動的に div のサイズを変更する jquery です。私はこれを試しましたが、ページをロードすることさえできません:

//Dropdown
$(document).ready(function () {
var dropDown = $('.dropdown');
$('h3.about').on('click', function() {
    dropDown.slideDown('fast', function() {
        var url = 'about2.php'

        $.get(url, function(data) {

        //anything in this block runs after the ajax call

            var missionWrap = $('#mission-wrap');
            var w = $(window);
            w.on('load resize',function() {
                missionWrap.css({ width:w.width(), height:w.height()});
            });
            var missionContent = $('#mission-content');
            var w = $(window);
            w.on('load resize',function() {
                missionContent.css({ width:w.width() - 205 });
            });
        });
    });
});

});

そして、これはページをロードしますが、それに関連付けられているすべての jQuery を強制終了します:

var dropDown = $('.dropdown');
$('h3.about').on('click', function() {
    dropDown.slideDown('fast', function() {
        $('#index-wrap').load('/about2.php');
    });
});

どうもありがとうございました。

私もこれを試しましたが、すべてが壊れました：

$(document).ready(function () {
var dropDown = $('.dropdown');
$('h3.about').on('click', function () {
    dropDown.slideDown('fast', function () {
        $.ajax({
            type: 'GET',
            url: 'about2.php',
            success: function () {
                var missionWrap = $('#mission-wrap');
                var w = $(window);
                w.on('load resize', function () {
                    missionWrap.css({
                        width: w.width(),
                        height: w.height()
                    });
                });
                var missionContent = $('#mission-content');
                var w = $(window);
                w.on('load resize', function () {
                    missionContent.css({
                        width: w.width() - 205
                    });
                });
            };
        });
    });
});

});

4

2 に答える 2

1

これは、これを正しく処理するためにアプリケーションを構築する方法の大まかな概要です。

HTML が次のようになっているとします。

<html>
...
<div id="index-wrap">
    <!-- this is the reloadable part -->
    ...
</div>
...
</html>

内部の要素に対するすべての jQuery 拡張機能をリファクタリングして#index-wrap、リロード後に呼び出すことができる関数にする必要があります。

function enhance(root) {
    $('#some-button-or-whatever', root).on('click', ...);
}

(つまり、AJAX を使用してロードされたルート要素の下にあるすべての要素を検索します。)

ページが最初にロードされたとき、および完了コールバックでの AJAX 呼び出しの後に、この関数を呼び出す必要があります。

$('#index-wrap').load('/foo.php', function() {
    enhance(this);
});

委任された(「ライブ」) イベントを使用して、この一部を取り除くこともできますが、それらがどのように機能するかについては、jQuery のドキュメントを参照することをお勧めします。

バインドされたイベントwindowまたは動的に読み込まれない DOM 要素については、読み込まれたサブページに基づいてそれらを再バインドする必要はまったくありません。読み込まれた要素のうち、一度設定したハンドラーにあるものを確認するだけです。

$(window).on('load resize', function() {
    var $missionContent = $('#missionContent');
    if ($missionContent.length) {
        $missionContent.css(...);
    }
});
于 2012-11-02T21:54:43.183 に答える
1

これはうまくいくはずです。

function resize_me () {
    var w = $(window);
    var missionWrap = $('#mission-wrap');
    var missionContent = $('#mission-content');
    missionWrap.css({ width:w.width(), height:w.height()});
    missionContent.css({ width:w.width() - 205 });
}

//Dropdown
$(document).ready(function () {
    $(window).on('load resize', function () {
        resize_me();
    });
    var dropDown = $('.dropdown');
    $('h3.about').on('click', function() {
        dropDown.slideDown('fast', function() {
            var url = 'about2.php'

            $.get(url, function(data) {
                resize_me();
            });
        });
    });
}

問題は、window オブジェクトにアタッチしていた load イベントが、$.get の正常な読み込みによってトリガーされなかったことだと思います。

于 2012-11-02T21:55:26.180 に答える