將點擊事件附加到表格似乎不起作用

我有一個表格，其中有2列的一些結果和一個複選框。當點擊複選框時，我應該將點擊或選中的部分放在同一頁面的div中。產生將點擊事件附加到表格似乎不起作用

THT HTML是這樣的：

<table cellspacing="0" cellpadding="4" id="ctl00_PlaceHolderMain_myGrid" style="color:#333333;width:100%;border-collapse:collapse;"> 
      <tr style="color:White;background-color:#5D7B9D;font-weight:bold;"> 
         <th scope="col">&nbsp;</th> 
         <th scope="col">JobCode</th> 
         <th scope="col">JobName</th> 
         <th scope="col">JobPartner</th> 
         <th scope="col">JobManager</th> 
         <th scope="col">ClientName</th> 
      </tr> 
      <tr style="color:#333333;background-color:#F7F6F3;"> 
         <td> 
          <input id="ctl00_PlaceHolderMain_myGrid_ctl02_CheckBox1" type="checkbox" name="ctl00$PlaceHolderMain$myGrid$ctl02$CheckBox1" /> 
         </td> 
         <td>Column1</td> 
         <td>Column2</td> 
         <td>Column3</td> 
         <td>Column4</td> 
         <td>Column5</td> 
      </tr> 
     </table>

而在js文件我有這樣的「：

/// <reference path="jquery-1.9.1.min.js" /> 
$(document).ready(function() { 


    //On every checkbow that is clicked 
    $("#myGrid INPUT").click(function() { 

     var clientCode = $(this).parent().parent().parent().find("td:eq(2)").text() 
     var clientName = $(this).parent().parent().parent().find("td:eq(1)").text() 
     var displayvalue = clientCode.toUpperCase() + " - " + clientName.toUpperCase(); 
     var removeDiv = $("#" + clientCode); 

     removeDiv.remove(); 

     if ($(this).prop("checked") == true) { 
      AddSelectedJob(clientCode, displayvalue); 
      // $("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + clientCode + '>' + displayvalue + '<a href="#"><i class="icon-trash"></i></a></div>'); 

      //Add to selectedjobs 
      FillSelectedJobs(); 
     } 
    }); 
}

當我使用的開發工具和附加JS調試器，我點擊一個複選框，用函數中的斷點，沒有任何反應。

更新

這是服務器的aspx代碼

<div style="width: 100%"> 
     <div style="float: left"> 
      <asp:Label ID="Label1" runat="server" Text="Search :"></asp:Label> 
     </div> 
     <div style="float: left"> 
      <asp:TextBox ID="txtSearch" runat="server" Width="250px"></asp:TextBox> 
     </div> 
     <div style="float: left"> 
      <asp:Button ID="btnSearch" runat="server" Text="Search" /> 
     </div> 
     <div style="float: left; margin-left: 20px"> 
      <asp:Label ID="lblClientCode" runat="server" Text=""></asp:Label> 
     </div> 
     <div style="clear: both"></div> 
     <div> 
      <div style="height: 300px; overflow: auto; float: left"> 
       <asp:GridView ID="myGrid" 
        AutoGenerateColumns="true" 
        runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%"> 
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> 
        <EditRowStyle BackColor="#999999" /> 
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> 
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> 
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> 
        <SortedAscendingCellStyle BackColor="#E9E7E2" /> 
        <SortedAscendingHeaderStyle BackColor="#506C8C" /> 
        <SortedDescendingCellStyle BackColor="#FFFDF8" /> 
        <SortedDescendingHeaderStyle BackColor="#6F8DAE" /> 
        <Columns> 
         <asp:TemplateField> 
          <EditItemTemplate> 
           <asp:CheckBox ID="chkSelected" runat="server" /> 
          </EditItemTemplate> 
          <ItemTemplate> 
           <asp:CheckBox ID="CheckBox1" runat="server" /> 
          </ItemTemplate> 
         </asp:TemplateField> 
        </Columns> 
       </asp:GridView> 
      </div> 
      <div style="margin-top: 0px; margin-left: 10px; float: left"> 
       <asp:Label Text="Selected :" runat="server"></asp:Label> 
       <div id="ResultsDiv" style="margin-top: 0px"> 
       </div> 
      </div> 
     <div style="clear: both"></div> 
    </div> 
    <div style="margin-top: 20px; margin-left: 550px"> 
     <asp:Button ID="btnClose" runat="server" Text="Close" /> 
    </div> 
    <div> 
     <asp:Label ID="lblError" runat="server" Text=""></asp:Label> 
    </div> 
    </div>

來源

2013-06-03 Luis Valencia

WHI ch元素有'id'' myGrid'？ –

我看不到任何元素與提供的Id ..你錯過了什麼，或者這是你的代碼的問題 –

我已經添加了aspx代碼，以更好地理解 –

看看這裏：http://jsfiddle.net/kb55u/

使用

$("#ctl00_PlaceHolderMain_myGrid input").change(function() {

代替

$("#myGrid INPUT").click(function() {

那麼它應該工作

來源

2013-06-03 06:34:03 BeNdErR

嘗試。對（）

$(document).on('click','#myGrid INPUT',function() {

來源

2013-06-03 06:29:36 PSR

調試器仍然沒有hiting斷點 –

我想你在代碼中有一些錯誤。請調試它 – PSR

試着做這樣的..

$('#myGrid INPUT').live('click', function(){

來源

2013-06-03 06:30:35 Paritosh

這意味着什麼？ –

.live已棄用 – PSR

'live' - 與'bind'相同 - 將控件與事件關聯。 [鏈接]（http://api.jquery.com/live/） – Paritosh

你的問題是，表中的id是由ASP分配的，所以當你通過#myGrid尋找它在你的JavaScript代碼，沒有什麼發現。

甲quick solution將包裹在一個DIV在asp GRIDVIEW與一個ID，並使用該ID 例如：

<div id="myGridContainer"> 
<asp:gridview id="myGrid" ...> 
</div> 

$("#myGridContainer INPUT").click(function() {...});

An other solution是選擇的ID與myGrid結束元素：

$("[id$=myGrid] INPUT").click(function() {...});

來源

2013-06-03 06:39:50 StashX

如果用戶點擊標題行，那麼這也會觸發？ –

是的，但即使id未被ASP更改，也會發生這種情況。你想避免這種情況嗎？另請注意，ID可能會更改，因此請勿使用BeNdErR的靜態硬編碼解決方案。 – StashX

你沒有在原始的頭部輸入，所以什麼都不會發生...... – StashX

試試這個：

$("[id$='CheckBox1']").click(function(){ 
    alert("CheckBox1 clicked"); 
});

來源

2013-06-03 06:43:23 Tushar

將點擊事件附加到表格似乎不起作用

回答

相關問題