javascript - 无法使用 JQuery 使 ASP.NET 控件按钮淡出

Question

我有一个非常简单的问题:我有一个 ASP.NET 控件按钮，我想让它淡出，然后使用 JQuery 调用一些函数(例如警报)。这是我目前所拥有的:

按钮的 ASP 代码:

<div id="begin">
        <span id="startButtonSpan">
            <asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick()"/>
        </span>
    </div>

JavaScript:

function startButtonClick()
{
    $("#startButtonSpan > input").fadeOut(500, callAlert());
}

function callAlert()
{
    alert("Made it here...");
}

当我单击该按钮时，会显示警告，但该页面似乎甚至没有尝试执行淡出。当我关闭警报时，按钮仍然在那里，盯着我看。

任何人都可以看到任何错误或任何人对我如何能够实现淡出我的按钮的预期目标有任何建议吗？ Fadeout 实际上只是我测试我是否可以使用 jQuery 操作 ASP 控件的方法，所以不仅仅是简单的 fadeOut，这是我试图学习如何做到这一点。

我使用下面的代码尝试了一个稍微更简单的 jQuery 调用，但它似乎也不起作用:

ASP 部分:

<div id="begin">
        <span id="startButtonSpan">
            <asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick()"/>
        </span>
    </div>

    <div id="jQueryTest" style="display:none;">
        Block for testing jQuery.
        <h1 id="testMessage">Child element for the ASP div.</h1>
    </div>

Javascript 部分:

function startButtonClick()
{
    $("#jQueryTest").css("display", "block");
    $("#jQueryTest").show();
}

对于这个例子，文本确实显示了，但它又立即消失了。

对于我可能做错的任何帮助或建议，我们将不胜感激。

Answer 1

使用类作为选择器 $('.startButton') 而不是 ID，因为 ASP.Net 控件在呈现时通过附加其页面和控件信息动态更改它们的 ID。

$(".startButton").fadeOut(500, callAlert);

或者，如果您坚持使用 ID，这是处理选择器的另一种方法，

$("#<%=startButton.ClientID %>")

或者，正如 Jacob 在 his answer 中建议的那样，您可以 ClientIDMode="Static"，但这仅适用于您的应用程序是 .Net 4.0 或更高版本。

此外，使用 CssClass 而不是 class

<asp:Button ID="startButton" Csslass="startButton" runat="server" Text="Click Me!" />