CODEWITHSUNDEEP
javascriptjquery
Luis Valencia
Luis Valencia

Reputation: 33998

Attaching click event to a table seems not working

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>

Upvotes: 0

Views: 117

Answers (5)

Paritosh
Paritosh

Reputation: 11570

Try doing like this..

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

Upvotes: 1

StashX
StashX

Reputation: 486

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

Upvotes: 1

Tushar
Tushar

Reputation: 140

Try this:

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

Upvotes: 0

BeNdErR
BeNdErR

Reputation: 17927

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

Upvotes: 1

PSR
PSR

Reputation: 40318

try with .on()

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

Upvotes: 2

Related Questions