0

编辑

我的代码现在位于文档的末尾，并且可以正常工作。谢谢帮助。

问题

我想调用一个点击功能......但是当我点击我的链接时，网站会重新加载。

这是我的代码：

(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>标记中，在您的第一个示例中，代码将在浏览器遇到它时立即执行。浏览器尝试将 click 事件绑定到 $('.next')，但尚未创建元素，因此该事件永远不会被绑定。

像这样包装代码$.ready()是非常好的做法，因此您的第二个示例是一个更好的解决方案。

于 2012-09-28T01:01:08.880 回答
0

当您不将代码包装在 中$(function () {...});时，DOM 尚未完全加载，当您的代码被执行时，因此$('.next')实际上$('.start')并不适用于任何元素。

发生这种情况是因为今天的 JS 引擎是如此快速和优化，以至于它们可以在浏览器完全加载页面之前执行你的整个脚本。

于 2012-09-28T00:59:13.623 回答