0 
        <!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>

クリック機能はまったく発火していません。それがおそらく要素であるかどうかを確認するために、1つを段落に変更しました。クリックを何度も使用しましたが、今回は起動せず、何が問題なのかまだわかりません...

4

1 に答える 1

6

要素が存在する前にハンドラーをバインドしようとしています。コードを DOM 対応ハンドラーでラップします。

$(document).ready(function() {
    $(".garagedoorthumbnail").click(function() {
        console.log("hello");
        alert("Handler for .click() called.");
    });
});
于 2013-10-10T20:38:14.643 に答える