Question

我认为我做错了什么，但事件仅在选择器为document时才有效。否则，不会发生。

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名称替换文档，则不会调用click事件。它仅在选择器为document时有效，但传递给函数的元素始终具有undefined之类的attibs。

可能会发生什么？

Answer 1

好像你把你的JavaScript代码放在了html代码之前。因此，当JavaScript代码运行时，要处理的元素尚未加载到DOM中。（这就是为什么你得到“未定义”）

只需将您的脚本放在相关的HTML代码之后。或者把它放在pageLoad事件中：

$(function(){
    ....
})

Answer 2

正在发生的事情是，在DOM元素存在之前，事件正试图绑定事件。

如果将事件包装在ready（）方法中，则可以保证在事件尝试绑定之前域存在。

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

ready（）方法依赖于浏览器DOMContentLoaded事件，这基本上意味着DOM在浏览器中完全加载，但并不一定意味着页面上的所有媒体都已完全加载。加载所有媒体后，onLoad浏览器事件将触发。

为什么没有触发jQuery事件？

2 个答案: