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

$( 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 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

所有答案都可以，但我想你还需要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

我发现为什么我的jQuery没有解雇这个事件。这只是因为我的GridView位于UpdatePanel内部，这就是为什么它在click事件被触发时没有加载到页面上

Answer 5

您可以使用委托。

$（＆＃34; #gridView＆＃34;）。委托（＆＃34;输入[type = submit]＆＃34;，＆＃34;点击＆＃34;，功能（）{

    alert("clicked!");

});

我用它来进行课堂授权，不确定是否可以提交，但你可以试试。

干杯

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

5 个答案: