0

キーボードを使用してナビゲーションを作成しようとしています。jquerys load() 関数を使用して新しいコンテンツをロードしますが、スクリプトが最初にロードされたときにのみ機能します。jquery live() 関数を使用してすべてのページをロードすることになっていると聞きましたが、そうではありません. これはキープレス関数です:

$(document).live("keydown", function(e){
        if (e.keyCode == 49) {
            $('.next').click();
        }
        if (e.keyCode == 50) {
            $('.prev').click();
        }
    });

このコードは、読み込まれるすべてのページにあります。しかし、ページを初めて使用するときにのみ機能し、1 回クリックした後は機能しません。なんで？.next と .prev の機能:

$('.next').click(function(event) {
        event.preventDefault();
        var href = this.href;
        $('.loading').fadeIn();
        $('#content').load(href, function(){ 
            $('.loading').fadeOut();
        });
    });

ただし、ロード後にマウスで常に .next および .prev を押すと機能します。一度だけ機能するキーを押すだけです。

これは HTML 構造です。

<div id="content">
 Image
 <div class="nav">
  <a href="page.php?id=1" class="prev">Prev</a>
  <a href="page.php?id=2" class="next">Next</a>
 </div>
</div>
4

2 に答える 2

2

このようにあなたのために働くようです。

$('.next').click(function (event) {
  event.preventDefault();
  var href = this.href;
  $('.loading').fadeIn();
  $('.main-bg').load(href, function () {
    $('.loading').fadeOut();
  });
});

これらの2つのボタンは常に必要なので、動的にロードする必要はありません。また、イベントの数はクリックするたびに増加します。したがって、main-bgdiv内のコンテンツのみを置き換えます。

アップデート：

また、画像を変更するたびにJavaScriptを再読み込みしていることに気づきました。それは問題を引き起こします。したがって、スクリプトは最初のページにのみ追加してください。

スクリプトを毎回ロードする場合は、次のコードを使用します

$(document).keydown( function(e){
        if (e.keyCode == 49) {
            $('.next').click();
        }
        if (e.keyCode == 50) {
            $('.prev').click();
        }
    });

$('.next').click(function(event) {
        event.preventDefault();
        var href = this.href;
        $('.loading').fadeIn();
        $('#content').load(href, function(){ 
            $('.loading').fadeOut();
        });
    });
于 2013-01-14T18:44:04.403 に答える
1 
$(document).on("keydown", function(e){
    if (e.keyCode == 49) {
        $('.next').trigger("click");
    }
    if (e.keyCode == 50) {
        $('.prev').trigger("click");
    }
});

$(document).on('click', '.next', function() {
    var href = $(this).attr("href");
    $('.loading').fadeIn();
    $('#content').load(href, function(){ 
        $('.loading').fadeOut();
    });
    return false;
});

コンテンツを読み込んだ後、＃contentが一意であることを確認してください...コードの一部を変更しましたが、必須ではないと思います。

于 2013-01-14T16:41:25.653 に答える