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 %>")

或者，正如雅各布在 his answer 中所建议的那样，您可以 ClientIDMode="Static"，但这仅在您的应用程序为 .Net 4.0 或更高版本时才有效。

另外，使用CssClass而不是class

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