单击函数中的事件

edit

我的代码现在在文档的末尾，它可以工作。谢谢你的帮助。

问题

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

这是我的代码：

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

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

$.ready()函数在 DOM "就绪"之前不会执行，这意味着浏览器有时间下载和解析页面的其余部分。

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

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

当你不用$(function () {...});包装你的代码时，DOM 还没有完全加载，当你的代码被执行时，因此$('.next')和$('.start')实际上不适用于任何元素。

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

相关内容

最新更新

热门标签：