ASP.NET-008-JS binding control event

Generally, events on the interface can be added through the event attributes inherent in the control. In fact, another way is to let JS bind events to the control, so that the control event can be dynamically changed, making it easier to implement functions.
The format of the JS binding control event is as follows:
$ ("# <% = Global Control name. clientID %> "). bind ("event name", function () {JS method (); return false;}) corresponding to the event ;});
Or
$ (Control object). bind ("event name", function () {JS method (); return false ;}) for the event ;});
The following code shows the effect of an event bound to a global button control and a row button in the Gridview.
Button

Button event in the gridview

The Code is as follows:
The front-end JS Code is mainly used for implementation. The back-end code is only responsible for displaying bound data.
Front-end,

         <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 Function First () {alert ("click button 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 ("operation button is clicked! "); Return false ;}</script>

Background

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 able (); 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"] = "northwest poplar"; nrow ["p_age"] = 27; nrow ["p_sex"] = "male"; PersonCollect. rows. add (nrow) ;}} return PersonCollect ;}}

Code download