2013-10-10 74 views
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> 

点击函数根本没有触发。我将其中一个改为了一个段落,以查看它是否可能是元素。我已经多次使用点击,但是这次它并没有发射,我也没有看到什么是错误的...jQuery .click函数没有触发

回答

6

你试图在元素存在之前绑定处理程序。将代码包装在DOM准备好的处理程序中:

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

感谢您发表本文。 – Giuseppe