點擊我的圖片時，jQuery點擊事件未被觸發

這是我的<head>。點擊我的圖片時，jQuery點擊事件未被觸發

<head> 
    <title>@ViewBag.Title</title> 
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />  
    <link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css' />  
    <link href='http://fonts.googleapis.com/css?family=Coda+Caption:800' rel='stylesheet' type='text/css' /> 
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' /> 
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script src="@Url.Content("~/Scripts/ddpowerzoomer.js")" type="text/javascript"></script> 

    <script type="text/javascript"> 
     jQuery(document).ready(function ($) { //fire on DOM ready 
      $('#mainproductpicture').addpowerzoom({ 
       defaultpower: 2, 
       powerrange: [2, 5], 
       largeimage: null, 
       magnifiersize: [200, 200] //<--no comma following last option! 
      }) 
     }) 

     $('#smallpictureone').click(function() { 
      alert('Handler for .click() called.'); 
     }); 

     $('#smallpicturetwo').click(function() { 
      alert('Handler for .click() called.'); 
     }); 

     $('#smallpicturethree').click(function() { 
      alert('Handler for .click() called.'); 
     }); 

     $('#smallpicturefour').click(function() { 
      alert('Handler for .click() called.'); 
     }); 

     $('#smallpicturefive').click(function() { 
      alert('Handler for .click() called.'); 
     }); 

    </script> 

</head>

而我的HTML：

<div id="auctiondetails"> 
    <img id="mainproductpicture" src="../../Content/Images/product2.JPG" alt="test" /> 

    <img id="smallpictureone" src="../../Content/Images/product1.JPG" /> 
    <img id="smallpicturetwo" src="../../Content/Images/product2.JPG" /> 
    <img id="smallpicturethree" src="../../Content/Images/product3.JPG" /> 
    <img id="smallpicturefour" src="../../Content/Images/product4.JPG" /> 
    <img id="smallpicturefive" src="../../Content/Images/product5.JPG" /> 

</div>

當點擊任何的應該是有線事件的圖像，沒有任何反應。有任何想法嗎？

來源

2011-08-15 Only Bolivian Here

你有你的jQuery（文件）後缺少分號...電話。 –

@ar：錯過了，謝謝。 :) –

您正在綁定DOMReady鉤子之外的那些點擊事件，因此這些元素在該特定時間點不存在。

內移動它們，你會被設置：前DOM已經準備好，所以它不會工作，試試這個

jQuery(document).ready(function ($) { //fire on DOM ready 
    $('#mainproductpicture').addpowerzoom({ 
     defaultpower: 2, 
     powerrange: [2, 5], 
     largeimage: null, 
     magnifiersize: [200, 200] //<--no comma following last option! 
    }); 

    // Start binding events here... 
})

來源

2011-08-15 20:15:18 ajm

那就是這樣。感謝您的幫助。我想正式學習jQuery。你會推薦的書嗎？ –

Sergio，我強烈建議您查看http://learn.appendto.com/。他們有一些關於jQuery和JavaScript的優質免費視頻教程。還請查看jQuery基礎http://jqfundamentals.com/book/index.html和Eloquent JavaScript http://eloquentjavascript.net/。這兩本書都是免費的書籍，可以幫助你理解jQuery和JavaScript。 – bittersweetryan

的點擊處理程序連接。

jQuery(document).ready(function ($) { //fire on DOM ready 
      $('#mainproductpicture').addpowerzoom({ 
       defaultpower: 2, 
       powerrange: [2, 5], 
       largeimage: null, 
       magnifiersize: [200, 200] //<--no comma following last option! 
      }) 


     $('#smallpictureone').click(function() { 
      alert('Handler for .click() called.'); 
     }); 

     $('#smallpicturetwo').click(function() { 
      alert('Handler for .click() called.'); 
     }); 

     $('#smallpicturethree').click(function() { 
      alert('Handler for .click() called.'); 
     }); 

     $('#smallpicturefour').click(function() { 
      alert('Handler for .click() called.'); 
     }); 

     $('#smallpicturefive').click(function() { 
      alert('Handler for .click() called.'); 
     }); 

    });

來源

2011-08-15 20:16:23 ShankarSangoli

把所有。點擊綁定內的就緒功能：

jQuery(document).ready(function ($) { //fire on DOM ready ... `}）;

當選擇器按id搜索時，你的圖像還沒有。

來源

2011-08-15 20:17:17

你只要把裏面的文件準備好你的事件處理程序：

$(function(){ 

//Place All event handlers here 

});

來源

2011-08-15 20:18:09

回答

相關問題