jQuery .click function not firing

Question

        <!DOCTYPE HTML>
        <html>
          <head>
            <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
            <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

            <style>
              body {
                margin: 0px;
                padding: 0px;
              }
              #myCanvas
              {
                background-color: blue;
              }
              .garagedoorthumbnail:hover
              {
                border: 1px solid green;
              }
            </style>
          </head>
          <body>
            <canvas id="myCanvas" width="540" height="305"></canvas>
            <script>
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            var imageObj = new Image();

            imageObj.onload = function() {
                context.drawImage(imageObj, 0, 0);
            };
            imageObj.src = 'backgroundgaragedoor.png';

            $( ".garagedoorthumbnail" ).click(function() {
                console.log("hello");
                alert( "Handler for .click() called." );
            });
            </script>
            <div id="doorgallary">
                <p class="garagedoorthumbnail" src="garagedoor-beadedpanel.png">aaa</p>
                <img class="garagedoorthumbnail"  src="garagedoor-beadedpanelclassic.png" />
                <img class="garagedoorthumbnail"  src="garagedoor-beadedpaneltrifold.png" />
                <img class="garagedoorthumbnail"  src="garagedoor-beadedpaneltrifoldstockton.png" />
            </div>
          </body>
        </html>

The click function is not firing at all. I changed one to a paragraph to see if it was maybe the element. I have used click many times but this time it is not firing and I don't see what is wrong yet...

Jason P · Accepted Answer · 2013-10-10 20:38:14Z

6

You're attempting to bind handlers before the elements exist. Wrap your code in a DOM ready handler:

$(document).ready(function() {
    $(".garagedoorthumbnail").click(function() {
        console.log("hello");
        alert("Handler for .click() called.");
    });
});

answered Oct 10, 2013 at 20:38

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eae Over a year ago

Thank you for posting this.

Collectives™ on Stack Overflow

jQuery .click function not firing

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related