Question

我只有一个按钮，我提到当用户在jQuery的帮助下点击按钮时要做什么。但是当我点击时，没有任何事情只发生回发。我不想要回发。

这是我的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="BBAWeb.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btn').click(showMessage);
            return false;
        });

        function showMessage() {
            $('#message').fadeIn('slow').html("Hello");
        }  
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btn" runat="server" Text="Click Me" />
        <div id="message">welcome to kolkata</div>
    </div>
    </form>
</body>
</html>

请查看我的代码并告诉我它有什么问题。我想要一个建议。

Answer 1

首先，当按钮最终显示在页面上时，asp.net会将按钮ID更改为更独特，以便更好地管理所有内容。

所以你的jquery $（“btn”）将无法找到任何东西。

相反，只需在按钮中添加一个类，例如“myBtn”，然后执行以下操作：

<asp:Button ID="btn" runat="server" Text="Click Me" CssClass="myBtn" />

和js：

<script>
$(".myBtn").click(function(event) {
  event.preventDefault();
  showMessage();
});
</script>

这应该有效。

Answer 2

return false应位于click事件处理程序中，但最好使用e.preventDefault（）

$(document).ready(function () {
    $('#<%= btn.ClientId%>').click(showMessage);
});

function showMessage(e) {
    e.preventDefault();
    $('#message').fadeIn('slow').html("Hello");
}

Answer 3

将按钮选择器更改为：

$('#<%= btn.ClientId%>').click(showMessage);

将return false移动到showMessage函数中。

Answer 4

执行此操作$('#btn').click(showMessage); jQuery尝试查找ID为“btn”的按钮，但由于您有一个服务器控件asp.net按钮，其ID不会呈现为“btn”，而是ASP.NET添加一堆字符串，以避免重复的ID。

因此，为了让jQuery能够找到您的按钮，请将脚本更改为：

$('#<%= btn.ClientID %>').click(showMessage);

Answer 5

有几种方法可以执行您尝试执行的操作，以及导致代码无效的几个原因。

首先，如果要阻止ASP.NET Button控件上的回发，则应该为其提供一个返回false的客户端OnClick处理程序。您可以使用JavaScript设置处理程序（正如您所做的那样），也可以在服务器端设置控件的OnClientClick属性。

其次，如果使用JavaScript设置处理程序，则需要使用Button的正确客户端ID。 Button的客户端ID不一定是您在Button ID属性中输入的内容。在此代码中：

<asp:Button ID="btn" runat="server" Text="Click Me" />

ID “btn”只是服务器端 ID，可以在您的C＃代码中使用。 客户端 ID将被重写为“ctl00 $ MainContent $ btn”之类的内容，因此需要在JavaScript中使用。您可以使用<%= btn.ClientID %>访问它，正如其他人指出的那样：

$('#<%= btn.ClientID %>').click(showMessage);

如果您使用的是.NET 4.0，您还可以在Button的属性中设置ClientIDMode="Static"，然后btn将在服务器端或客户端使用。

<asp:Button ID="btn" runat="server" Text="Click Me" ClientIDMode="Static" />

因此，总结一下：您的showMessage函数应如下所示：

    function showMessage() {
        $('#message').fadeIn('slow').html("Hello");
        return false;
    }

您的其他代码应该是以下代码之一：

1

$(document).ready(function () {
        $('#btn').click(showMessage);
        return false;
    });
...
<asp:Button ID="btn" runat="server" Text="Click Me" ClientIDMode="Static" />

2

$(document).ready(function () {
        $('#<%= btn.ClientID %>').click(showMessage);
        return false;
    });
...
<asp:Button ID="btn" runat="server" Text="Click Me" />

3

//no $(document).ready needed
...
<asp:Button ID="btn" runat="server" Text="Click Me" OnClientClick="return showMessage()" />

Jquery相关问题

5 个答案: