Fatal编程技术网
  • javascript/
  • Javascript 如何使用jQuery处理每个输入类型提交的onClick事件？

Javascript 如何使用jQuery处理每个输入类型提交的onClick事件？

javascript jquery ajax web-services

Javascript 如何使用jQuery处理每个输入类型提交的onClick事件？,javascript,jquery,ajax,web-services,firebug,Javascript,Jquery,Ajax,Web Services,Firebug,我是jQuery的新手。。。还在学呢。但我需要一个快速的解决方案，以便能够注册表中每个按钮的单击事件 下表由GridView生成： <div id="gridView"> <div> <table cellspacing="0" border="1" style="border-color:Red;border-collapse:collapse;position:absolute; top: 290px;" id="Mai

我是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>


ISONUMOFICE名称区域分区电子邮件地址
222222222
我的测试
99
11111
CB2222001
丹尼斯·彼得罗维奇
99801
FT2222001
丹尼斯·彼得罗维奇
99801
这个表的每一行都有一个
按钮
，我只需要确保当单击按钮时，我将调用我的web服务方法来更新同一行上的文本字段，但为此，我需要首先捕获该事件。我想通过jQuery/Ajax来实现这一点，尽管我可以用不同的方式实现，但在本例中，这是首选的方式

有什么建议吗

多谢各位

---更新---

我尝试了这里给出的每个建议，但由于某种原因，当单击
按钮时，什么也没有发生。这是否可能与我的
grid
有关，在查看我的页面的源代码时，我没有为表格生成任何
html
？我以前提供的源代码是使用firebug获得的，您可以使用delegate

$（“#gridView”）.delegate（“输入[type=submit]，“单击”，函数（）{

我把它用于类委托，不确定是否适用于提交，但您可以试试

Cheers
您可以使用jQuery将事件处理程序附加到所选元素。在您的情况下，它看起来是这样的，尽管您可能需要使用其他选择器。您可以只使用$（“input[type='submit']）。on（…）


所有的答案都可以，但我想你也需要


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



这是因为您需要停止按钮的传播。
我找到了我的
jQuery
没有触发事件的原因。这只是因为我的GridView位于
UpdatePanel
中，这就是为什么在
单击
事件触发时它没有加载到页面上的原因（'input[type=“submit”]）。单击（函数（e）{/*dosomething*/}）；
-其中“dosomething”可以是一个
$.ajax（）
调用，并且在函数
$（this）中。最近的（'tr'）。find（'something'）
将允许您从与单击按钮相同的行获取数据。“从jQuery 1.7开始，.delegate（）已被.on（）方法取代”-如果您想测试它，这里有一个链接-出于某种原因，当单击按钮时，什么也没有发生。我的页面上引用了我的
.js
文件。这可能与我的网格在查看我的页面源代码时没有为表生成任何html有关吗？@eugene。如果是这种情况，请使用jquery“on”处理程序绑定click事件。（我已经更新了我的答案）。

$( 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 */ );
      }
   });
}



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



$( 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 */ );
      }
   });
}