jquery - jquery 函数不工作

Question

我在更新面板内的 div 中放置了一个中继器。并在页面中添加了一个 jquery 函数以对其添加一些效果。在每个 page_load 事件上调用 jquery 函数。它在测试页面上运行良好，但是当我在母版页中实现它时没有显示任何效果，我的 jquery 函数是

<script type="text/javascript">
 function pageLoad(sender, args) {
            // JQuery code goes here
            function domReady() {
                $('#btn1').click(showMessage);
                $('#btn1').trigger('click');
            }
                  function showMessage() {
                 $('#message').fadeOut(10);

                $('#message').slideDown(1000);

            };

     $(domReady);
};
</script>}

和 html 是

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Timer ID="Timer1" runat="server" Interval="5000" ontick="Timer1_Tick">
        </asp:Timer>
        <br />
        <div style="height:480px;overflow:scroll;">
        <asp:Repeater ID="Repeater1" runat="server">
       <ItemTemplate>

                    <div id="message" >
                   <img id="image" alt="visitors" runat="server" src="~/icon-visitors.png" height="32" width="32" /></td><td>
                      <b>A New visitor come from </b><b class="data"><%#Eval("lt_country") %></b> &nbsp;&nbsp;<%#Eval("pk_id") %> <br />
                   &nbsp; <b>Ip :- </b><%#Eval("lt_ip") %><b>/ Browser :-</b><%#Browser(Eval("lt_browser").ToString()) %><b>/ 
                   Operating System :</b><%#Os(Eval("lt_browser").ToString()) %><br /><br />
                    </div>
               </ItemTemplate>
        </asp:Repeater>
       <button id="btn1" style="visibility:hidden;"></button>
       </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
</asp:UpdatePanel>

Answer 1

在中继器中，不要对按钮和 div 使用 id，而是使用 class。因为 id 应该是唯一的。如果您提供 id，它将无法正常工作。

您的脚本和 html 应更改如下

<script type="text/javascript">
 function pageLoad(sender, args) {
            // JQuery code goes here
            function domReady() {
                $('#btn1').click(showMessage);
                $('#btn1').trigger('click');
            }
                  function showMessage() {
                 $('.message').fadeOut(10);

                $('.message').slideDown(1000);

            };

     $(domReady);
};
</script>

<asp:Repeater ID="Repeater1" runat="server">
       <ItemTemplate>

                    <div class="message" >
                   <img id="image" alt="visitors" runat="server" src="~/icon-visitors.png" height="32" width="32" /></td><td>
                      <b>A New visitor come from </b><b class="data"><%#Eval("lt_country") %></b> &nbsp;&nbsp;<%#Eval("pk_id") %> <br />
                   &nbsp; <b>Ip :- </b><%#Eval("lt_ip") %><b>/ Browser :-</b><%#Browser(Eval("lt_browser").ToString()) %><b>/ 
                   Operating System :</b><%#Os(Eval("lt_browser").ToString()) %><br /><br />
                    </div>
               </ItemTemplate>
        </asp:Repeater>
       <button id="btn1" style="visibility:hidden;"></button>