Jquery $("img").click(function() selector not working

Question

For some reason when I click on an image with this JQuery code the alert screen doesn't show up.

HTML:

<div id="example1">
 <div>
  <div>
   <div class="user">
    <img class="Image" src="images/image.jpg">
   </div>
  </div>
 </div>
</div>

Javascript:

$(document).ready(function(){
 $("img").click(function(){
  alert("it works!");
 });
});

I cant figure out why this isn't working I included the jquery library and the <script> tag is under the div

Answer 1

the img isn't in the DOM when your event handler is registered. you can use $('body').on('click','img',function(){alert('it works');})

Answer 2

Rather than run your code in document.ready(), you should use window.load() function instead.

$(window).load(function() {
    $("img").click(function(){
        alert("it works!");
     });
});

• document.ready() is a jQuery event, it runs when the DOM is ready, e.g. all elements are there to be found/used, but not necessarily all content.
• window.load() fires later (or at the same time in the worst/failing cases) when images and such are loaded, so if you're using image dimensions for example, you often want to use this instead.