2011-10-08 15 views
2

私は何か間違っていると思うが、セレクタがdocumentの場合のみイベントが機能する。さもなければ、起こらない。なぜjQueryイベントが発生しないのですか?

HTML

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

Javascriptを

/* 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); 

私は$('#canvas').click(canvasClickEvent);のようなdivの名で文書を交換する場合、クリックイベントは呼び出されません。セレクタがdocumentの場合にのみ機能しますが、関数に渡される要素には常にundefinedのようなattibがあります。

何が起こっている可能性がありますか?

+1

うーん - ここでは正常に動作:http://jsfiddle.net/nrabinowitz/nzTDY/ – nrabinowitz

+0

何かが内部の '#のcanvas'を行くか、それが空であるのか? –

+0

@muistooshort SVGが描画されますが、これがなければ動作しません。テキストとテキストなし、CSSとCSSなしでは動作しません。 –

答えて

2

イベントがDOM要素が存在する前にイベントをバインドしようとしていることです。

あなたがあなたのイベントをバインドしようとする前に、ドメインが存在することを保証する準備ができて()メソッドの内部イベントをラップする場合。

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

レディ()メソッドは、ブラウザ基本的には完全にブラウザにロードされるDOMを意味DOMContentLoadedイベントに依存しているが、ページが完全に読み込まれている上、必ずしもすべてのメディアを意味するものではありません。すべてのメディアがロードされると、onLoadブラウザイベントが発生します。

2

htmlコードの前にJavaScriptコードを挿入したようです。したがって、JavaScriptコードが実行されるとき、処理される要素はまだDOMにロードされません。 (あなたは「未定義」だ理由です)

ただ、関連するHTMLコードの後に​​スクリプトを置きます。またはpageLoadイベントの中に置く:何が起こっている

$(function(){ 
    .... 
}) 
関連する問題