Question

这是我的<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>

单击任何应为该事件连接的图像时，没有任何反应。有什么想法吗？

Answer 1

您绑定了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...
})

Answer 2

在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.');
        });

    });

Answer 3

将所有.click绑定放在就绪函数中：

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

当按ID搜索选择器时，您的图像尚未存在。

Answer 4

您只需将事件处理程序放在文档中：

$(function(){

//Place All event handlers here

});

单击我的图像时不会触发jQuery单击事件

4 个答案: