0

先ほど質問したのですが、あることに気が付きました。DIV次のコードを使用して、外部 PHP をロードするメイン ページを取得しました。

$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
$('#content').load('pages/index.php');



// Handle Clicks
$('ul.nav li a').click(function() {
    var page = $(this).attr('href');

    $('#content').hide().load('pages/' + page + '.php').fadeIn('normal');



    //Wont Redirect
    return false;

});
// /

   });

ページは に正常に読み込まれますDIVが、JavaScript が再生されています。上は動かないし、下は動く。どちらも使用

 $(function() {
 <script>

    $(function() {

        var target = $('.fademe');
        var targetHeight = target.outerHeight();
        $(document).scroll(function(e){
            var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
            if(scrollPercent >= 0){
                target.css('opacity', scrollPercent);
            }
        });

    });

    </script>

    <script>
    $(function () {
        $.scrollUp();
    });
    </script>
4

2 に答える 2

1

pastie2 つのファイルを見ると、fademe元のページにある HTML ではなく、後で読み込まれる HTML 内にクラスを含む HTML 要素が含まれているようです。したがって、jQuery は のクラスを持つ要素を見つけられないため、最初の関数は機能しませんfademe。

関数を機能させるには、 load に含める必要がありますcallback。

$('#content').load('pages/index.php', function() {

    var target = $('.fademe');
    var targetHeight = target.outerHeight();
    $(document).scroll(function(e){
        var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
        if(scrollPercent >= 0){
            target.css('opacity', scrollPercent);
        }
    });
});
于 2013-04-04T20:54:00.367 に答える
0

あなたは ajax コンテンツであるため、存在しない (まだ) DOM 要素にイベント ハンドラーをアタッチしているようです。そのため、ajax はデフォルトで非同期であり、DOM はまだサーバーの応答を受信して​​いません。

次のように、デリゲートを使用してイベント ハンドラーをアタッチできます。

$('body').on('click', 'ul.nav li a', function() {
    var page = this.href;

    $('#content').hide().load('pages/' + page + '.php').fadeIn('normal');

    //Wont Redirect
    return false;
});

または、ajax の成功コールバック関数にイベント ハンドラーをアタッチします。

それが役に立てば幸い。

于 2013-04-04T21:22:08.830 に答える