javascript - 将点击事件附加到表格似乎不起作用

Question

我有一个表格，其中包含 2 列中的一些结果和一个复选框。单击复选框时，我应该将单击或选定的复选框放在同一页面的 div 中。

生成的 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>

Answer 1

尝试使用 .on()

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

Answer 2

看看这里：http: //jsfiddle.net/kb55u/

利用

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

代替

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

那么它应该工作

Answer 3

您的问题是表 id 是由 ASP 分配的，因此当您在 javascript 代码中查找它时#myGrid，什么也找不到。

一个快速的解决方案是将 asp gridView 包装在带有 id 的 Div 中，并使用该 id 示例：

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

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

另一种解决方案是选择 id 以 结尾的元素myGrid：

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

Answer 4

尝试这样做..

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

Answer 5

尝试这个：

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