jQuery click event isn't fired when I click my image
Here's my <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>
And my 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/pr开发者_StackOverflow中文版oduct4.JPG" />
<img id="smallpicturefive" src="../../Content/Images/product5.JPG" />
</div>
When click any of the images that's supposed to be wired for the event, nothing happens. Any ideas?
You're binding those click events outside of your DOMReady hook, so those elements don't exist at that particular point in time.
Move them inside, and you'll be set:
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...
})
The click handlers are attached before the dom is ready so it will not work, try this.
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.');
});
});
Put all .click bindings inside on-ready function:
jQuery(document).ready(function ($) { //fire on DOM ready
...
`});
Your images are not there yet when selector searches by id.
You just have to place your event handlers inside document ready:
$(function(){
//Place All event handlers here
});
加载中,请稍侯......
精彩评论