JS绑定控件事件的格式如下：
$("#<%=全局控件名.ClientID%>").bind("事件名", function () { 事件对应的JS方法(); return false; });
或者
$(控件对象).bind("事件名", function () { 事件对应的JS方法(); return false; });
来看代码，下面是一个全局按钮控件和一个Gridview里的行的按钮绑定的事件的效果。
按钮
gridview中的按钮事件
代码如下
主要有前台JS代码来实现，后台代码仅仅负责显示绑定的数据。
前台，
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body id="Body1" runat="server">
<form id="Form1" runat="server">
<asp:Button ID="btnFirst" runat="server" Text="按钮1"/>
<asp:GridView ID="dgPersons" runat="server" EnableViewState="false" CellPadding="4"
GridLines="Horizontal" PageChange="TextBox" AutoGenerateColumns="False" SortMode="Total" ForeColor="#333333"
CellSpacing="1" Width="60%" ShowNoRecordTip="True">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<%#Container.DataItemIndex +1%>
<input id="hideID" type="hidden" runat="server" value=‘<%#Eval("p_id")%>‘ />
</ItemTemplate>
<HeaderTemplate>
<span>序号</span>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<span> <%#Eval("p_name")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>姓名</span>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<span> <%#Eval("p_age")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>年龄</span>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<span> <%#Eval("p_sex")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>性别</span>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btClick" runat="server" Text="点击" />
</ItemTemplate>
<HeaderTemplate>
<span>操作</span>
</HeaderTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" HorizontalAlign="Center" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<RowStyle HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
</form>
</body>
<script type="text/javascript" src="/Scripts/Ajax.js"></script>
<script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript">
var dgPersonsID = "<%= dgPersons.ClientID %>";
$(document).ready(function () {
$("#<%=btnFirst.ClientID%>").bind("click", function () { FunctionFirst(); return false; });
BindEventGridView();
});
function FunctionFirst() {
alert("按钮1点击");
return false;
}
function BindEventGridView() {
var dgg = document.getElementById(dgPersonsID);
for (var i = 1; i < dgg.rows.length; ++i) {
var cells = dgg.rows[i].cells;
var row = dgg.rows[i];
if (row.style.display != "none") {
$(cells[4].firstChild).bind("click", function () { OperateClick(); return false; });
}
}
return false;
}
function OperateClick() {
alert("操作按钮被点击！");
return false;
}
</script>
</html>后台public partial class ChildFrm : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = InitData();
this.dgPersons.DataSource = dt;
this.dgPersons.DataBind();
}
}
private DataTable InitData()
{
DataTable PersonCollect = new DataTable();
PersonCollect = new DataTable();
PersonCollect.Columns.Add("p_id");
PersonCollect.Columns.Add("p_name");
PersonCollect.Columns.Add("p_age");
PersonCollect.Columns.Add("p_sex");
if (PersonCollect.Rows.Count < 1)
{
for (int i = 0; i < 5; i++)
{
DataRow nrow = PersonCollect.NewRow();
nrow["p_id"] = System.Guid.NewGuid().ToString();
nrow["p_name"] = "西北白杨树";
nrow["p_age"] = 27;
nrow["p_sex"] = "男";
PersonCollect.Rows.Add(nrow);
}
}
return PersonCollect;
}
}
代码下载