0

編集

私のコードはドキュメントの最後にあり、機能します。ヘルプのためのthx。

質問

クリック関数を呼び出したいのですが、リンクをクリックするとサイトがリロードされます。

これが私のコードです：

(function(window, undefined) {
var gn = (function(){

var sitelength   = $(window).width(),
    $next        = $('.next'),
    $start       = $('.start'),

    init = function(){
      _scrollto();
      _checkmenu();
    },

    _scrollto = function(){
      $next.on( 'click', function( event ) {
        $('html,body').animate({scrollLeft: $("body").offset().left+200},1500);
        return false;
      });

      $start.on( 'click', function( event ) {
        $('html,body').animate({scrollLeft: $("body").offset().left+0},1500);
        return false;
      });
    },

    _checkmenu = function(){
      $(window).scroll(function(e){
        if($(this).scrollLeft()>100 && (!$('#side').hasClass('ac'))){
          $('#side').addClass('ac');
          $('#side').animate({ left : -230 }, 'slow');
          $('#sitenav').animate({ left : 0 }, 'slow');
        }

        if($(this).scrollLeft()<100 && $('#side').hasClass('ac')){
          $('#side').removeClass('ac');
          $('#side').animate({ left : 20 }, 'slow');
          $('#sitenav').animate({ left : -50 }, 'slow');
        }
      });
    }

return { init : init };
})();
gn.init();
})(window);

しかし、「$（document）.ready（function（））」でクリックするもの全体を除外すると、正常に機能します。

$(document).ready(function(){
var $next        = $('.next'),
$start       = $('.start');

      $next.on( 'click', function( event ) {
        $('html,body').animate({scrollLeft: $("body").offset().left+200},1500);
        return false;
      });

      $start.on( 'click', function( event ) {
        $('html,body').animate({scrollLeft: $("body").offset().left+0},1500);
        return false;
      });
});

誰かがそれを修正する理由と方法を教えてもらえますか？

4

2 に答える 2

1

この$.ready()関数は、DOM が「準備完了」になるまで実行されません。これは、ブラウザーがページの残りの部分をダウンロードして解析する時間があったことを意味します。

コードがタグ内にあると仮定すると<head>、最初の例では、ブラウザがコードを検出するとすぐにコードが実行されます。ブラウザーはクリック イベントを $('.next') にバインドしようとしますが、要素がまだ作成されていないため、イベントはバインドされません。

このようなコードをラップすること$.ready()は非常に良い方法であるため、2 番目の例ははるかに優れたソリューションです。

于 2012-09-28T01:01:08.880 に答える
0

コードをでラップしない$(function () {...});場合、コードが実行されるときにDOMはまだ完全にロードされていないため$('.next')、$('.start')実際には要素に適用されません。

これは、今日のJSエンジンが非常に高速で最適化されているため、ブラウザーがページを完全にロードする前にスクリプト全体を実行できるために発生します。

于 2012-09-28T00:59:13.623 に答える