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>

点击功能根本没有触发。我将一个改为一个段落，看看它是否可能是元素。我多次使用过点击，但这次没有点火，我还没看到什么问题......

Answer 1

您尝试在元素存在之前绑定处理程序。将代码包装在DOM就绪处理程序中：

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

jQuery .click函数没有触发

1 个答案: