当我单击图像时，jQuery 单击事件不会被触发

发布于 2024-11-29 16:59:43 字数 2467 浏览 1 评论 0原文

这是我的。

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

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

原文

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/product4.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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

灯角 2024-12-06 16:59:43

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

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...
})

回复收藏 0 原文

那小子欠揍 2024-12-06 16:59:43

点击处理程序是在 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.');
        });

    });

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

    });

回复收藏 0 原文

渔村楼浪 2024-12-06 16:59:43

将所有 .click 绑定放入 on-ready 函数中：

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

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

回复收藏 0 原文

落日海湾 2024-12-06 16:59:43

您只需将事件处理程序放入准备就绪的文档中即可：

$(function(){

//Place All event handlers here

});

You just have to place your event handlers inside document ready:

$(function(){

//Place All event handlers here

});

回复收藏 0 原文

~没有更多了~

关于作者

少年亿悲伤

暂无简介

0 文章

0 评论

23 人气

关注发私信

已经忘了多久

文章 0 评论 0

关注

15867725375

文章 0 评论 0

关注

LonelySnow

文章 0 评论 0

关注

走过海棠暮

文章 0 评论 0

关注

轻许诺言

文章 0 评论 0

关注

信馬由缰

文章 0 评论 0

友情链接

文江博客

当我单击图像时，jQuery 单击事件不会被触发

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

当我单击图像时，jQuery 单击事件不会被触发

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。