如何處理每個輸入類型使用jQuery提交的onClick事件？

Question

我是新來的jQuery ...仍然在學習它。但是我需要一個快速解決方案來爲我的表格中的每個按鈕註冊點擊事件。

由GridView中產生下表：

<div id="gridView"> 
       <div> 
    <table cellspacing="0" border="1" style="border-color:Red;border-collapse:collapse;position:absolute; top: 290px;" id="MainContent_grvIsoSearchResults" rules="all"> 
     <tbody><tr> 
      <th scope="col">ISONUM</th><th scope="col">OFFICE NAME</th><th scope="col">REGION</th><th scope="col">DIVISION</th><th scope="col">EMAIL ADDRESS</th> 
     </tr><tr> 
      <td> 
           <span style="display:inline-block;width:70px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoNum_0">222222222 </span> 
          </td><td> 
           <span style="display:inline-block;width:200px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoOfficeName_0">My Test</span> 
          </td><td> 
           <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvRegion_0">99</span> 
          </td><td> 
           <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvDivision_0">11111</span> 
          </td><td> 
           <input type="text" style="width:200px;" onclick="ResetMessage();" id="MainContent_grvIsoSearchResults_txtgvEmailAddress_0" value="mytest@google.com" name="ctl00$MainContent$grvIsoSearchResults$ctl02$txtgvEmailAddress"> 
           <input type="submit" id="MainContent_grvIsoSearchResults_btnEmailUpdate_0" value="Update" name="ctl00$MainContent$grvIsoSearchResults$ctl02$btnEmailUpdate"> 
          </td> 
     </tr><tr> 
      <td> 
           <span style="display:inline-block;width:70px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoNum_1">CB2222001 </span> 
          </td><td> 
           <span style="display:inline-block;width:200px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoOfficeName_1">DENNIS PETROVIC   </span> 
          </td><td> 
           <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvRegion_1"></span> 
          </td><td> 
           <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvDivision_1">99801</span> 
          </td><td> 
           <input type="text" style="width:200px;" onclick="ResetMessage();" id="MainContent_grvIsoSearchResults_txtgvEmailAddress_1" value="dennis@dlgent.com" name="ctl00$MainContent$grvIsoSearchResults$ctl03$txtgvEmailAddress"> 
           <input type="submit" id="MainContent_grvIsoSearchResults_btnEmailUpdate_1" value="Update" name="ctl00$MainContent$grvIsoSearchResults$ctl03$btnEmailUpdate"> 
          </td> 
     </tr><tr> 
      <td> 
           <span style="display:inline-block;width:70px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoNum_2">FT2222001 </span> 
          </td><td> 
           <span style="display:inline-block;width:200px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoOfficeName_2">DENNIS PETROVIC   </span> 
          </td><td> 
           <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvRegion_2"></span> 
          </td><td> 
           <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvDivision_2">99801</span> 
          </td><td> 
           <input type="text" style="width:200px;" onclick="ResetMessage();" id="MainContent_grvIsoSearchResults_txtgvEmailAddress_2" value="dennis@dlgent.com" name="ctl00$MainContent$grvIsoSearchResults$ctl04$txtgvEmailAddress"> 
           <input type="submit" id="MainContent_grvIsoSearchResults_btnEmailUpdate_2" value="Update" name="ctl00$MainContent$grvIsoSearchResults$ctl04$btnEmailUpdate"> 
          </td> 
     </tr> 
    </tbody></table> 
</div> 

此表對各行的Button，我只需要確保當點擊按鈕時，我會打電話給我的web服務方法來更新文本字段在同一行，但爲此我需要首先捕捉該事件。我想通過jQuery/Ajax來完成，儘管我可以以不同的方式完成它，但在這種情況下，這是首選方法。

有什麼建議嗎？

謝謝

--- UPDATE ---

我想這裏給出的每一個建議，但由於某些原因，在button點擊時，沒有發生。是否有可能與我的grid在查看我的網頁源代碼時無法爲表格生成任何html？我之前提供的源代碼，我使用了firebug。

Answer 1

您可以使用委託。

$（ 「＃GridView控件」）。委託（ 「輸入[類型=提交]」， 「點擊」，函數（）{

alert("clicked!"); 

}); 

我用這個上課代表團，不知道是否會工作對於提交，但你可以嘗試。

乾杯

Answer 2

您可以使用jQuery的.on() method將事件處理程序附加到選定的元素。在你的情況下，它應該是這樣的，雖然你可能需要使用不同的你可以使用$（「input [type ='submit']」）。on（...）

$().ready(function() { 
    $("#gridView div table tbody tr td input[type='submit']").on("click", handleClick); 
}); 

function handleClick() { 
    alert('clicked'); 
} 

Answer 3

所有答案都OK，但我猜你也需要的preventDefault

$(document).ready(function() { 
$("#gridView input[type='submit']").on("click", function(e) { 
     e.preventDefault(); 
     /*do something, use $(this) to know wich button was pressed*/ 
}); 
}); 

這是因爲你需要停止你的按鈕的傳播。

Answer 4

$(document).on("click", "#gridView input[type='submit']", function(){ 
    /* here is your clicked button's ID */ 
    console.log("ID : "+ $(this).attr("id")); 
    /* here is your clicked button's NAME */ 
    console.log("NAME : "+ $(this).attr("name")); 
    /* now call your web service using jquery Ajax */ 
    callService($(this).attr("id"), $(this).attr("name")); 
}); 


function callService(id, name) { 
    $.ajax({ 
     type: 'POST', /* can be GET or POST */ 
     url: 'your web service url', /* your web service's url */ 
     data: { id : id, name : name }, /* post varibales */ 
     dataType : 'your data type', /* expected data types can be XML, JSON, HTML */ 
     success: function(data){ /* get called when response from your web service arrived */ 
     /* 'data' has the response data */    
     console.log(data); 
     /* you can get the text box of same row like */ 
     $("#"+ id).prev().val(/* set value for text box */); 
     } 
    }); 
} 

Answer 5

我發現了爲什麼我的jQuery沒有啓動事件。這僅僅是因爲我的GridView在UpdatePanel之內，這就是爲什麼它沒有在頁面上加載的時間click事件觸發