在功能Click事件

我的代码现在是在文件的结尾和它的作品。 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(){ 
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; 
     }); 
});

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

来源

2012-09-28 gn90at

您的点击函数的第一个版本在DOM准备好之前绑定了单击事件，所以元素还不存在。尝试在DOM就绪函数内运行'gn.init（）'函数。 – adeneo

我的代码现在在DOM（文档的末尾）下面，现在它工作:)所以DOM被加载并且元素存在。 thx – gn90at

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

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

来源

2012-09-28 00:59:13 CQQL

谢谢！现在我的js代码已经在我的文档的末尾，并且可以工作。 thx的解释 – gn90at

只需将您的代码放在文档的末尾并不能真正解决您的问题。在最好的情况下，这是一种解决方法，因为您在加载页面时依赖于时间正确性，但这可能会在每次更新和每个浏览器中发生变化。在DOM准备就绪之前，某些浏览器可能仍然会执行您的代码。为了解决这个问题，你必须明确说明后DOM准备用'$周围你的代码应该被执行（函数（）{...}）;'，例如在浏览器的DOMReady事件上执行。 – CQQL

哦，好的，谢谢。我把我的代码包装在$（function（window，undefined）{}）;这个可以吗？ – gn90at

的$.ready()功能不执行，直到DOM是“准备好”，这意味着浏览器有时间来下载和分析你的页面的其余部分。

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

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

来源

2012-09-28 01:01:08 Kelvin

谢谢！现在我的js代码已经在我的文档的末尾，并且可以工作。 thx的解释 – gn90at

在功能Click事件

回答

相关问题