使用自定义 jquery 插件时单击事件未触发答案

【问题标题】：Click event is not firing when using custom jquery plugin使用自定义 jquery 插件时单击事件未触发
【发布时间】：2011-11-25 02:23:06
【问题描述】：

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

问题是：当我执行第一次点击时这工作正常，但在连续点击时没有任何反应。我试图将警报消息放在点击事件中，但由于第二次和连续的点击没有触发，甚至警报消息也没有出现。我正在使用 ASP.NET 3.5。

【问题讨论】：

我对 ASP 不熟悉，但是等待 runat="server" 的意思。为了让 jQuery 工作，必须在文档中创建 DOM 元素。

标签： jquery asp.net jquery-ui jquery-plugins

【解决方案1】：

啊，刚开始的时候也遇到了同样的问题。拨打电话时：

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

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

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

【讨论】：

.on() 是 jQuery 1.7 的新功能，如果您不使用最新版本的 jQuery，请使用 .live()。

【解决方案2】：

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

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

【讨论】：