jQuery在asp:button上的点击事件

Question

I have a server side button as

<asp:Button ID="btnSummary" runat="server" OnClick="btnSummary_Click" Text="Next" />

我想通过ID附加jQuery Click事件，而不是使用替代的class属性方式。

我尝试附加点击事件如下：

$("#btnSummary").click(function() 
        {
            alert("1");
        });

但是，它的点击事件没有被触发。我也尝试过$("id[$btnSummary]")。

有没有办法在不使用按钮上的class属性的情况下，使用jQuery附加asp:button的点击事件？

- Sachin Gaur

---

如有必要，在开始或任何 AJAX 调用之前添加 event.preventDefault()。 - GoldBishop

Answer 1

以下是一些选项可以找到 如何阻止ASP.NET更改ID以便使用jQuery

编辑：

阅读您在其他答案中的评论后，听起来您需要在ASP.NET AJAX的pageLoad中绑定onclick事件处理程序，使其绑定在每次PostBack上，包括异步PostBack。另一方面，$(document).ready()仅在初始页面加载时绑定一次。

function pageLoad(sender, args)
{
     $("#<%=btnSummary.ClientID %>").click(function() 
    {
        alert("1");
    });
}

Dave Ward写了一篇关于pageLoad和$(document).ready()之间差异的好文章。

- Russ Cam

Answer 2

在你的 asp:button 上添加 ClientIDMode="Static"，例如：

<asp:Button ID="Button1" runat="server" ClientIDMode="Static" Text="Button" />

这将使ID保持不变。 它禁用了此控件的自动生成名称。

这里是相关参考信息：http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx

- Luis Coell

Answer 3

1. 运行网站时，请检查HTML源代码中是否存在id属性。
   
2. 您是否在文档就绪函数内部使用了点击功能？

$(document).ready(function() {
    // put all your jQuery goodness in here.
});

编辑:

由于它是服务器端控件且ID会更改，因此您需要在每次页面加载时动态更新javascript变量。

- Ólafur Waage

---

是的，我的代码在 document.ready 部分里面。ID 也在 HTML 中，但它是服务器端控件。它的 ID 会发生变化。这就是我问这个问题的原因。 - Sachin Gaur

Answer 4

ASP.NET 会为客户端生成一个 UniqueID，您可以使用它来绑定事件。该 ID 是基于 ControlCollection 中该控件的位置和不同的 INamingContainers 生成的，它很丑陋，您无法猜测它...

在页面的某个地方添加此类代码以连接该按钮。

<script type="text/javascript">
  $(function() { $("#<%=btnSummary.ClientID%>") }).click(function(){/*...*/});
</script>

- John Leidegren

---

我不能使用你的建议，因为我必须动态添加UpdatePanel。这是我们网站的要求。 - Sachin Gaur

您正在动态添加的按钮是否在UpdatePanel内部？ - Russ Cam

如果您不知道ClientID，也没有办法钩取UpdatePanel onchange事件，那么您就会像我们说的那样陷入困境。认真地说，您需要将这些ClientID作为它们在HTML中出现的方式传递。如果您使用Firefox，可以通过UpdatePanel检查返回的DOM。 - John Leidegren

客户端ID已经存在，您只需要将绑定单击事件挂钩到UpdatePanel更新的成功上即可。那应该很容易。 - John Leidegren

您无法关闭自动生成的ID。 - m4tt1mus

Answer 5

我现在有点困惑。

让我解释一下：

1. I added a button on the page:
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server"  Text="Button" />
<div>

2. Then I added a JavaScript and jQuery:
<script type="text/javascript">
                    $(document).ready(function() {
                    $("#Button1").click(function() {
                        alert("Hello world!");
                    });

                    });
                </script>

3. The generated html is this:
<div>
  <input type="submit" name="Button1" value="Button" id="Button1" />
<div>

现在，我没有看到ASP.NET（asp.net 3.5）更改ID。为什么我看到不同的行为？

顺便说一句，当我点击按钮时，这确实有效！

谢谢。

- ra170

Answer 6

将选择器分配给类对我很有用。

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="My Button" CssClass="myButton"/>

<script>
    jQuery(".myButton").click(function () {
        alert("clicked");
    });
</script>

- GeoffD

Answer 7

ASP.NET 给你添加了 id （例如：id "selectButton" 变成了

"ctl00_middleContent_gvPeople_ctl04_selectButton");

使用 jQuery 语法来搜索不变的 id 部分。

$("[id='_selectButton']")

- Bless Yahu

Answer 8

我之前也遇到了同样的问题，这个方法对我很有用

<asp:Button ID="Button1" runat="server" Text="ASP Button" OnClientClick="return false;" />

似乎是添加了“return false”才有所不同。希望这可以帮到你。

祝好

Peter

- Peter

Answer 9

在使用updatepanels时，请使用pageLoad，因为document.ready仅在页面初始化时运行一次，并且在部分postback时失去其绑定。 PageLoad每次都会运行，因此将重新绑定每个部分postback。

- Alex Stephens

Answer 10

请使用以下语法：$("[id*=Button1]") 来引用任何ASP控件。

- user3615318