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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

单击应该为事件连接的任何图像时,没有任何反应.有任何想法吗？

Answer 1

ajm*_*ajm 8

您将这些点击事件绑定到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...
})

Run Code Online (Sandbox Code Playgroud)

Sergio,我强烈建议你查看http://learn.appendto.com/.他们有一些关于jQuery和JavaScript的优质免费视频教程.另请查看jQuery基础知识http://jqfundamentals.com/book/index.html和Eloquent JavaScript http://eloquentjavascript.net/.这两本书都是免费的,可以帮助您理解jQuery和JavaScript. (2认同)

归档时间：	14 年，3 月前
查看次数：	14647 次
最近记录：	14 年，3 月前