2013-10-10 113 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