Jquery FadeIn FadeOut 只工作一次答案

【问题标题】：Jquery FadeIn FadeOut works only onceJquery FadeIn FadeOut 只工作一次
【发布时间】：2015-04-09 15:50:24
【问题描述】：

我有LinkButton，点击显示asp:panel，其中包含图像和关闭按钮。面板 id 是 LinkButton1 并且此面板内的关闭按钮 id 是 close 它工作正常，除了 FadeIn 只触发一次。如果我刷新整个页面，它会再次工作，但我不希望用户刷新能够重复fadein/fadeout 面板。

 <asp:LinkButton runat="server" ID="LinkButton1" CssClass="navButtons" >Restorant</asp:LinkButton>

$(document).ready(function () {
            $('#LinkButton1').click(function () {
                $('#Viewer').fadeIn(1000);
            });

            $('#close').click(function () {
                $('#Viewer').fadeOut(1000);

            });
        });


<body >

    <form id="form1" runat="server">
         <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:Panel runat="server" ID="Viewer" CssClass="Viewer">
            <asp:Image runat="server" ID="ViewerImage" CssClass="ImageV" ImageUrl="~/Hotel/as.jpg" />
            <asp:Image runat="server" ID="close" CssClass="close" ImageUrl="~/Background/close.jpg" />                
        </asp:Panel>

【问题讨论】：

你能提供更多的html吗？ #close 在哪里？我根据您所拥有的内容创建了一个演示，它似乎工作正常：jsfiddle.net/fb659v1o
如果 dom 元素是动态创建和销毁的，您将需要使用绑定方法 api.jquery.com/bind
尝试改用toggle()
嗯，它确实可以在您的演示中使用，但我的仍然无法；找不到原因

标签： javascript jquery asp.net

【解决方案1】：

如果您遇到事件绑定问题，可以尝试以下方法：

$(document).ready(function () {
    $('body').on('click', '#LinkButton1', function(){
        $('#Viewer').fadeIn(1000);
    });

    $('body').on('click', '#close', function(){
        $('#Viewer').fadeOut(1000);
    });
});

【讨论】：

很高兴我们有同样的想法！

【解决方案2】：

试试这个：你将函数绑定到主体

$(function {
    $('body').on('click', '#LinkButton1', function () {
        $('#Viewer').fadeIn(1000);
    });

    $('body').on('click', '#close', function () {
        $('#Viewer').fadeOut(1000);
    });
});

【讨论】：

【解决方案3】：

首先，你的链接按钮在你的body元素之外，这是错误的。

其次，默认情况下，ASP.NET 元素 ID 与它们所呈现到的 DOM 元素的 id 不匹配。

为了获得真实 ID，请使用 ClientID 属性：

var lbId = '#<%= LinkButton1.ClientID %>'
  , viewerId = '#<%= Viewer.ClientID %>'
  , closeId = '#<%= close.ClientID %>'


$(function() {
   var lb = $(lbId)
     , viewer = $(viewerId)
     , close = $(closeId)

   lb.on('click', viewer.fadeIn.bind(viewer, 1000))
   close.on('click', viewer.fadeOut.bind(viewer, 1000))
})

如果您的代码实际上在 updatepanel 或其他东西中，实际上会更改 DOM 并将元素放入并从 DOM 中取出元素，您有两种选择：

在 jQuery 中使用事件委托
订阅 UpdatePanel 的事件

对于事件委托，将您的代码更改为：

var lbId = '#<%= LinkButton1.ClientID %>'
  , viewerId = '#<%= Viewer.ClientID %>'
  , closeId = '#<%= close.ClientID %>'


$(function() {
   var body = $('body')        
     , viewer = $(viewerId)
   body.on('click', lbId ,  viewer.fadeIn.bind(viewer, 1000))
   body.on('click', closeId , viewer.fadeOut.bind(viewer, 1000))
})

如果您有 updatepanel 并且由于某种原因不想使用事件委托，请使用此答案中的代码：Jquery class selector is not working in ASP.Net Gridview

【讨论】：