Home/ Questions/Q 6693721
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:01:04+00:00

I thinkg I doing something wrong, but the events only works if the selector

  • 0

I thinkg I doing something wrong, but the events only works if the selector is document. Otherwise, not happens.

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

If I replace the document by the div name like $('#canvas').click(canvasClickEvent);, the click event is not called. It’s only works if the selector is document, but the element passed to the function always has the attibs like undefined.

What might be happening?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What is happening is that event is attempting to bind the event before the DOM element exists.

    If you wrap the events inside of the ready() method you guarantee that the domain exists before your event attempts to bind.

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

    The ready() method is dependent on the browsers DOMContentLoaded event which basically means the DOM is completely loaded in the browser, but does not necessarily mean all the media on the page has completely loaded. Once all media is loaded the onLoad browser event fires.

    • 0