Question

修改

我的代码现在位于文档的末尾并且可以正常运行。请求帮助。

问题

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

这是我的代码：

(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;
      });
});

有人可以告诉我为什么以及如何解决它？

Answer 1

{DOM}'准备就绪'后，$.ready()函数才会执行，这意味着浏览器有时间下载并解析页面的其余部分。

假设您的代码位于<head>标记中，在第一个示例中，代码将在浏览器遇到代码时立即执行。浏览器尝试将click事件绑定到$（'。next'），但该元素尚未创建，因此事件永远不会被绑定。

这样包装代码$.ready()是非常好的做法，所以你的第二个例子是一个更好的解决方案。

Answer 2

如果不将代码包装在$(function () {...});中，则在执行代码时，DOM尚未完全加载，因此$('.next')和$('.start')实际上不适用于任何元素。< / p>

这是因为今天的JS引擎非常快速且经过优化，可以在浏览器完全加载页面之前执行整个脚本。

单击事件功能

2 个答案: