Событие jQuery click не запускается при нажатии на мое изображение - PullRequest
Новая
       304

Событие jQuery click не запускается при нажатии на мое изображение

2 голосов
/ 16 августа 2011

Вот мои <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>

При нажатии любого из изображений, которые должны быть подключены к событию, ничего не происходит.Есть идеи?

Ответы [ 4 ]

8 голосов
/ 16 августа 2011

Вы связываете эти события клика за пределами вашего DOMReady хука, поэтому эти элементы не существуют в данный конкретный момент времени.

Переместите их внутрь, и вы получите: 

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...
})
1 голос
/ 16 августа 2011

Обработчики кликов присоединяются до того, как 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!
            })


        $('#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.');
        });

    });
0 голосов
/ 16 августа 2011

Вам просто нужно поместить обработчики событий в готовый документ: 

$(function(){

//Place All event handlers here

});
0 голосов
/ 16 августа 2011

Поместите все привязки .click внутри функции готовности:

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

Ваши изображения еще не найдены, когда селектор выполняет поиск по идентификатору.

...