在功能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事件

回答

相關問題