javascript - 为什么 jQuery 事件没有被触发?

标签 javascript jquery events

我认为我做错了什么,但只有当选择器是文档时,这些事件才有效。否则,不会发生。

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

如果我用 div 名称替换文档,例如 $('#canvas').click(canvasClickEvent);,则不会调用 click 事件。仅当选择器为 document 时才有效,但传递给函数的元素始终具有诸如 undefined 之类的 attibs。

可能会发生什么?

最佳答案

发生的情况是事件试图在 DOM 元素存在之前绑定(bind)事件。

如果将事件包装在 read() 方法中,则可以保证在事件尝试绑定(bind)之前该域存在。

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

ready() 方法依赖于浏览器的 DOMContentLoaded 事件,这基本上意味着 DOM 已完全加载到浏览器中,但并不一定意味着页面上的所有媒体都已完全加载。一旦所有媒体加载完毕,就会触发 onLoad 浏览器事件。

关于javascript - 为什么 jQuery 事件没有被触发?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7694737/

相关文章:

javascript - 无法读取 null 的属性 'addEventListener'

javascript - 检查 JavaScript 是否存在意外分配

javascript - 只需要获取 ID 的一部分(最后一个下划线之前的所有内容)

javascript - 重复表复选框仅返回原始值而不是重复项

javascript - 更改元素的属性 - 为什么 onchange 事件没有触发?

javascript - 用 webpack 填充一个包

javascript - 如何基于当前路由/URL 构建动态面包屑组件?

jquery - DataTables 仅在页面刷新时加载

javascript - d3点击拖动事件嵌套

Java - PaintComponent 中的 MouseListener 操作事件