为什么javascript行必须在函数中才能工作？

Question

If I put this javascript on my aspx page, the panel shows as expected upon button click:

 <script type="text/javascript">
 function ShowPopUp() {
     $('#<%= upNewClient.ClientID %>').show();
 }
 </script>

 <asp:Button ID="btnNewClient" runat="server" OnClientClick="javascript: ShowPopUp(); return false;" />

But if I try to do this w/o the function, it doesn't work:

<asp:Button ID="btnNewClient" runat="server" OnClientClick="javascript: $'(%<= upNewClient.ClientID %>'.show(); return false;"/>

The page flashes and there might be an error appearing in my javascript console, but it comes and goes too quickly for me to read it.

So, why doesn't the exact same line of code work outside of the function?

EDIT: I've rewritten this code several times (I'm actually trying to do it in the code behind), and I mistyped it the time just before my initial posting. The actual button tag is:

<asp:Button ID="btnNewClient" runat="server" Text="Add New Client" OnClientClick="javascript: $('#<%= upNewClient.ClientID %>').show(); return false;" />

This flashes an error in my javascript console very quickly that I believe says: Uncaught Error: Syntax error, unrecognized expression: #<%= upNewClient.ClientID %>

Answer 1

You are missing the # id selector for your inline and incorrectly placed quotes.. missing closing paren

so

$'(%<= upNewClient.ClientID %>'.show();

should be

$('#<%= upNewClient.ClientID %>').show();

Answer 2

You have a syntax error. $'(%<= should be $('#<%= and you forgot the closing parenthesis for $(...)

Answer 3

The <%= ... %> syntax isn't supported within the attributes of a server-side control, so the whole thing gets sent to the browser:

<input type="submit" name="btnNewClient" value="Add New Client"
    onclick="javascript: $('#&lt;%= upNewClient.ClientID %>').show(); return false;"
    id="btnNewClient" />

Because jQuery can't parse the expression, it throws an exception.

Instead, you can set the button's OnClientClick property from the code-behind:

<asp:Button ID="btnNewClient" runat="server" Text="Add New Client" />

protected override void Render(HtmlTextWriter writer)
{
    this.btnNewClient.OnClientClick =
        "$('#" + this.upNewClient.ClientID + "').show(); return false;";
    base.Render(writer);
}

(Setting the property in Render (instead of, say, OnInit , OnLoad , or OnPreRender ) prevents the value from unnecessarily bloating view state.)

Answer 4

我认为问题出在语法上，尝试像这样更改它

<asp:Button ID="btnNewClient" runat="server" OnClientClick="$('#<%= upNewClient.ClientID %>').show(); return false;"/>