Javascript Jquery FadeIn FadeOut只工作一次_Javascript_Jquery_Asp.net

Javascript Jquery FadeIn FadeOut只工作一次

javascript jquery asp.net

Javascript Jquery FadeIn FadeOut只工作一次,javascript,jquery,asp.net,Javascript,Jquery,Asp.net,我有一个LinkButton，点击后显示asp:面板，其中包含图像和关闭按钮。面板id为LinkButton1，此面板内的close按钮id为close。除FadeIn仅触发一次外，其工作正常。如果我刷新整个页面，它会再次工作，但我不希望用户刷新后能够反复淡出/淡出面板 <asp:LinkButton runat="server" ID="LinkButton1" CssClass="navButtons" >Restorant</asp:LinkButton> $(

我有一个LinkButton，点击后显示asp:面板，其中包含图像和关闭按钮。面板id为LinkButton1，此面板内的close按钮id为close。除FadeIn仅触发一次外，其工作正常。如果我刷新整个页面，它会再次工作，但我不希望用户刷新后能够反复淡出/淡出面板

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

如果遇到事件绑定问题，可以尝试以下操作：

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

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

尝试以下方法：将函数绑定到主体

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

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

首先，链接按钮在身体元素之外，这是错误的

其次，默认情况下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并从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，并且出于某种原因不想使用事件委派，请使用以下答案中的代码：

您能提供更多html吗？关门在哪？我根据您所拥有的创建了一个演示，它似乎工作得很好：如果dom元素是动态创建和销毁的，您将希望使用绑定方法，尝试使用toggle代替teadhmm，它确实可以在您的演示中工作，但我的仍然不能；I don’我找不到我们有相同想法的理由！