Attaching click event to a table seems not working

Question

I have a table with some results in 2 columns, and one checkbox. When the checkboxes are clicked I should put the clicked or selected ones in a div in the same page.

Tht html generated is like this:

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

And in the js file I have this":

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

When I use developer tools and attach the js debugger, and I click on a checkbox, with a breakpoint inside the function, nothing happens.

Update

This is the server aspx code

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

i cannot see any element with the provided Id..are you missing something or is this the problem with your code — Amit Sharma, Jun 03 '13 at 06:33
Could you provide rendered html code? it will be more clarify. — Edward, Jun 03 '13 at 06:45

score 2 · Answer 1 · answered Jun 03 '13 at 06:29

2

try with .on()

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

answered Jun 03 '13 at 06:29

PSR

39,804
41
111
151

Paritosh · Answer 2 · 2013-06-05T13:57:21.533

1

Try doing like this..

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

edited Jun 05 '13 at 13:57

answered Jun 03 '13 at 06:30

Paritosh

11,144
5
56
74

'live' - same as 'bind' - attaches event with controls. [link](http://api.jquery.com/live/) – Paritosh Jun 03 '13 at 06:32
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Please check [the document](http://api.jquery.com/live/). – Edward Jun 03 '13 at 06:33

score 1 · Accepted Answer · answered Jun 03 '13 at 06:34

1

have a look here: http://jsfiddle.net/kb55u/

use

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

instead of

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

then it should work

answered Jun 03 '13 at 06:34

BeNdErR

17,471
21
72
103

score 1 · Answer 4 · edited May 23 '17 at 11:57

1

Your problem is that the table id is assigned by ASP so when you look for it in your javascript code by #myGrid, nothing is found.

A quick solution would be to wrap the asp gridView in a Div with an id, and use that id example:

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

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

An other solution is to select the element that the id ends with myGrid:

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

edited May 23 '17 at 11:57

Community

1
1

answered Jun 03 '13 at 06:39

StashX

166
4

if the user clicks the header row, then this will be triggered also? – Luis Valencia Jun 03 '13 at 06:49
Yes but this would also happen even if the id wasn't changed by ASP. Do you want to avoid that? Also note that the ID may change so don't use the static hardcoded solution by BeNdErR. – StashX Jun 03 '13 at 06:55
Here is an other selector for your jQuery: `$("[id$=myGrid] input").click(...);` – StashX Jun 03 '13 at 07:02

score 0 · Answer 5 · answered Jun 03 '13 at 06:43

0

Try this:

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

answered Jun 03 '13 at 06:43

Tushar

140
7

Attaching click event to a table seems not working

5 Answers5