Click 이벤트는

내 코드는 문서의 끝 부분에 지금 그것은 작동합니다. 도움을 청합니다.

질문

내가 클릭 함수를 호출 할 ...하지만 난 내 링크 사이트를 다시로드를 클릭하면.

여기 내 코드입니다 :

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

하지만 난에 전체 클릭의 일을 제외하면 "$ (문서) .ready (함수())"그것을 잘 작동합니다.

$(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이 준비되기 전에 click 이벤트를 바인딩하므로 요소가 아직 존재하지 않습니다. 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을 준비한 후에 코드를'$ (function() {...});로 둘러 쌀 것을 명시 적으로 명시해야합니다. 브라우저의 DOMReady 이벤트에서 실행됩니다. – CQQL

오 오 감사합니다. 내 코드를 $ (function (window, undefined) {})에 래핑합니다; 이거 괜찮아? – gn90at

DOM이 '준비'될 때까지 $.ready() 함수가 실행되지 않습니다. 즉, 브라우저가 페이지의 나머지 부분을 다운로드하고 구문 분석 할 시간을 가졌음을 의미합니다.

코드가 <head> 태그에 있다고 가정하면 첫 번째 예에서는 브라우저에서 코드가 실행되는 즉시 코드가 실행됩니다. 브라우저는 click 이벤트를 $ ('. next')에 바인드하려고하지만 요소가 아직 생성되지 않았으므로 이벤트가 결코 바인딩되지 않습니다.

이 코드는 다음과 같습니다. $.ready()은 매우 좋은 연습이므로 두 번째 예제가 훨씬 더 좋은 해결책입니다.

출처

2012-09-28 01:01:08 Kelvin

고마워요! 이제 내 js 코드가 내 문서 끝에 있고 작동합니다. 설명을 위해 thx – gn90at

Click 이벤트는

답변

관련 문제