如何处理使用 jQuery 提交的每种输入类型的 onClick 事件？答案

【问题标题】：How to handle onClick event for each input type submit using jQuery?如何处理使用 jQuery 提交的每种输入类型的 onClick 事件？
【发布时间】：2014-03-27 01:34:50
【问题描述】：

我是 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 来实现，虽然我可以用不同的方式来实现，但在这种情况下这是首选方式。

有什么建议吗？

谢谢

---更新---

我尝试了这里给出的每一个建议，但由于某种原因，当点击button 时，什么都没有发生。这可能与我的grid 在查看我的页面的源代码时没有为表格生成任何html 有关吗？之前提供的源码，我用的是firebug。

【问题讨论】：

$('input[type="submit"]').click(function(e) { /* do something */ }); - 其中“做某事”可以是$.ajax() 调用，而在函数$(this).closest('tr').find('something') 中，您可以从单击按钮所在的同一行获取数据。

标签： javascript jquery ajax web-services firebug

【解决方案1】：

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

【讨论】：

由于某种原因，单击按钮时，什么也没有发生。我的页面上引用了我的.js 文件。这可能与我的网格在查看我的页面的源代码时没有为表格生成任何 html 有关吗？
@eugene.it 这种情况下使用 jquery 'on' 处理程序来绑定点击事件。（我已经更新了我的答案）。

【解决方案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');
}

【讨论】：

如果你想测试一下，这里有一个链接 - jsFiddle Link

【解决方案3】：

所有答案都可以，但我想你还需要 preventDefault

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

这是因为您需要停止按钮的传播。

【讨论】：

【解决方案4】：

我发现了为什么我的jQuery 没有触发该事件。这只是因为我的 GridView 在 UpdatePanel 内，这就是为什么它在 click 事件触发时没有加载到页面上

【讨论】：

【解决方案5】：

您可以使用委托。

$("#gridView").delegate("input[type=submit]", "click", function() {

    alert("clicked!");

});

我将它用于班级委派，不确定是否适用于提交，但您可以尝试。

干杯

【讨论】：

“从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代” - link