Question

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

Answer 1

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

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

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

Answer 2

试试这个：你将函数绑定到正文

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

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

Answer 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并从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

Jquery FadeIn FadeOut只工作一次

3 个答案: