Question

我是JQuery的新手，我正在尝试使用我在网上找到的插件来翻转图片。我正在使用可用的插件http://www.hieu.co.uk/blog/index.php/imageswitch/

我在我的asp.net项目中添加了js库，并使用了库中提到的flipOut方法。

<script type="text/javascript">
        var ImgIdx = 2;
        var ImgName = "slash";
        $(document).ready(function () {

            $("img#image").click(function () {
                if (ImgIdx > 4)
                    ImgIdx = 2;
                ImgName = ImgName + ImgIdx + ".jpg";
                ImgIdx = ImgIdx + 1;
                if ($(this).hasClass("fadeout")) {
                    // $(this).fadeTo('slow', 1);
                    $(this).toggleClass("fadeout");
                    $(this > img).ImageSwitch({ Type: "FlipIn", NewImage: "slash2.jpg" });

                }
                else {
                    $(this).fadeTo('slow', 0.5);

                    // FlipIn
                    $(this).toggleClass("fadeout");
                    $(this).ImageSwitch({ Type: "FlipIn", NewImage: "slash3.jpg" });
}});});
</script>
<html><body>
 <asp:Image ID ="image" ImageUrl= "slash2.jpg" runat="server"></body></html>

问题是：当我执行第一次点击时，此功能正常，但在连续点击时没有任何反应。我试图在click事件中放入警报消息，但由于第二次和连续点击没有触发，甚至没有显示警报消息。我使用的是ASP.NET 3.5。

Answer 1

啊，我刚开始时遇到同样的问题。当你拨打电话时：

 $("img#image").click(function () {
 }

您只将事件绑定到页面上的现有元素。我的猜测是你的插件使用AJAX，动态加载项目。如果您尝试访问动态加载的内容，请使用on()：

$(document).on('click', 'img#image', function()
{
    //do stuff
});

Answer 2

使用html img标签而不是使用Asp.net。它只会在不在客户端的服务器上执行操作。 Jquery是javascript框架，只能运行客户端机器。如果您使用指定的ID，请不要将其与img一起使用

$("#image").click(function () { //your code here });

使用自定义jquery插件时，不会触发Click事件

2 个答案: