div标签没有出现在asp按钮上

Question

I have the following code in script tag:

 $(document).ready(function () {
     $('#Button1').click(function () {
         $("#loading").show(500000);
     });
 });

and here is the button and the div tag:

 <asp:Button ID="Button1" runat="server" Text="View Summary" 
            onclick="Button1_Click" />
    </p>
    <div id="loading">Page is loading...</div>

when I click the button, div tag is not showing up. I have display:none; for div in css..

Answer 1

$("#loading").show(500000);

Is going to take like 500 seconds to show up.

Try

$("#loading").show();

The argument in show indicates how many milliseconds it takes before the element shows up. Leaving no argument in show() defaults to .show(400)

Answer 2

You button is rendered by asp.net and it changes the id (unless you have set the static id mode) so when rendered id of the button will not be Button1 instead it will have other things appended to it (to avoid id duplication as much as possible). So use the ClientId to register the click handler. Also the duration for show animation is in milliseconds and you have it too long, just shorten it up a bit as well.

Try:-

  $('#<%= Button1.ClientID %>').click(function () {
     $("#loading").show();
  });

Another approach it to provide a CssClass to your button and bind the handler to that as the selector.

 <asp:Button ID="Button1" runat="server" CssClass="Button1" Text="View Summary" 
        onclick="Button1_Click" />

and

 $('.Button1').click(function () {
     $("#loading").show();
  });