这是我的 <head> .
<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>
当单击任何应该为事件连接的图像时，没有任何反应。有什么想法吗？
最佳答案
您在 DOMReady Hook 之外绑定(bind)这些点击事件，因此这些元素在该特定时间点不存在。
将它们移到里面，你就可以了:
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...
})
关于当我单击图像时，jQuery 单击事件不会被触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7070234/