2011-10-08 5 views
2

내가 뭔가 잘못하고 있다고 생각하지만 선택자가 document 인 경우에만 이벤트가 작동합니다. 그렇지 않으면 발생하지 않습니다.jQuery 이벤트가 실행되지 않는 이유는 무엇입니까?

내가 $('#canvas').click(canvasClickEvent); 같은 DIV 이름으로 문서를 교체하는 경우, 클릭 이벤트가 호출되지

/* Click on canvas */ canvasClickEvent = function(e){ if(e.shiftKey){ selectedElement = $(this).attr("id"); } } /* Events */ $(document).ready(documentLoadEvent); $(document).click(canvasClickEvent); //this works, but is wrong //$("#canvas").click(canvasClickEvent); --this is what I want, but not works $(document).dblclick(canvasDblClickEvent); 

HTML

<html>                 
    <head> 
     <!-- the libraries references here --> 
    </head>                 
    <body> 
     <div id="canvas"></div>  
    </body>                 
</html> 

자바 스크립트

. 선택기가 document 인 경우에만 작동하지만 함수에 전달 된 요소는 항상 undefined과 같은 attibs를가집니다.

무슨 일입니까?

+1

흠 - 여기에서 잘 작동 : http://jsfiddle.net/nrabinowitz/nzTDY/ – nrabinowitz

+0

'# 캔버스'안에 무엇이 있습니까? 아니면 비어 있습니까? –

+0

@muistooshort SVG가 그려 지지만 SVG가 없으면 작동하지 않습니다. 텍스트가 있거나 텍스트가없는 경우, CSS가 있거나 CSS가없는 경우 작동하지 않습니다. –

답변

2

이벤트는 DOM 요소가 존재하기 전에 이벤트를 바인딩하려고 시도하는 중입니다.

ready() 메서드 내부에서 이벤트를 래핑하는 경우 이벤트가 바인딩되기 전에 도메인이 존재 함을 보장합니다.

$(document).ready(function() { 
    $("#canvas").click(canvasClickEvent); 
} 

레디() 메소드는 브라우저에 기본적으로 완전히 브라우저에로드 된 DOM을 의미 DOMContentLoaded 이벤트에 의존하지만 페이지가 완전히로드가에 반드시 모든 미디어를 의미하지 않는다. 모든 미디어가로드되면 onLoad 브라우저 이벤트가 실행됩니다.

2

html 코드를 작성하기 전에 JavaScript 코드를 삽입 한 것처럼 보입니다. 따라서 JavaScript 코드가 실행되면 처리 할 요소가 아직 DOM에로드되지 않습니다. (이유가 "정의되지 않음"입니다)

관련 HTML 코드 뒤에 스크립트를 넣으십시오. 또는 pageLoad 이벤트에 넣습니다.

$(function(){ 
    .... 
}) 
관련 문제