ASP Repeater - catch generated button click in jQuery function

Question

I'm pretty new to jQuery and I'm having problems with picking up button click events in jQuery from buttons generated within an ItemTemplate in an ASP Repeater.

I've spent a few (wasted) hours searching for an answer that will work, with no luck yet.

A snip from My .ASPX page:

<asp:Repeater ID="rptJobs" runat="server">
    <ItemTemplate>
        <asp:Panel ID="Panel1" runat="server">
            <table>
                <tr>
                    <td>Desc:</td>
                    <td></td>
                    <td><%#Eval("DESCRIPTION")%></td>
                </tr>
            </table>
            <asp:Button runat="server" ID="myBtn" Tag='<%# Eval("JOB_NO") %>' Text='Go'  />
        </asp:Panel>
    </ItemTemplate>
</asp:Repeater>

The generated HTML:

<div id="rptJobs_ctl00_Panel1">
    <table>
        <tr>
            <td>Desc:</td>
            <td></td>
            <td>Test Data 1</td>
        </tr>
    </table>
    <input type="submit" name="rptJobs$ctl00$myBtn" value="Go" id="rptJobs_ctl00_myBtn_0" Tag="MI0683" />
</div>
<div id="rptJobs_ctl01_Panel1">
    <table>
        <tr>
            <td>Desc:</td>
            <td></td>
            <td>Test Data 2</td>
        </tr>
    </table>
    <input type="submit" name="rptJobs$ctl01$myBtn" value="Go" id="rptJobs_ctl01_myBtn_1" Tag="MI0684" />
</div>

Now, this jQuery works (specifying the generated button id):

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $("#rptJobs_ctl00_myBtn_0").click(function () {
         // This displays the text from the Tag element of the button...    
                alert($(this).attr("tag"));
            });
        });

    });
</script>

However, I want to be able to use a generic function that will be called for the click event for all the generated buttons - any help appreciated!

Ted H

Answer 1

Note that all of the names end with myBtn (the value that you set ID to). So use the jQuery selector where you select items with names ending in myBtn :

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("[name$='myBtn']").click(function () {
            alert($(this).attr("tag"));
            return false;
        });
    });
</script>

... or limit the select to only inputs: $("input[name$='myBtn']").click(function () { ...

Reading: jQuery Selectors

UPDATE: As Bartdude mentioned, it is actually quicker to select on class. Here are some results iterating 1000 times across 1000 repeater items using a test similar to this SO answer :

Selectors Used:

by Class: $(".fakeClass")
by Name Limited to Input: $("input[name$='myBtn']")
by Name: $("[name$='myBtn']")
by Data Attr: $('[data-fakeAttr="me"]')
by ID Limited to Input: $("input[id*=myBtn]")
by ID: $("[id*=myBtn]")

Chrome:

by Class: 281
by Name Limited to Input: 655
by Name: 687
by Data Attr: 515
by ID Limited to Input: 702
by ID: 858

IE 9:

by Class: 367
by Name Limited to Input: 1711
by Name: 3257
by Data Attr: 3779
by ID Limited to Input: 1663
by ID: 3695

Somewhat older browser, Safari 5:

by Class: 793
by Name Limited to Input: 925
by Name: 1023
by Data Attr: 983
by ID Limited to Input: 1005
by ID: 1242

Even older browser, FireFox 3.6:

by Class: 1320
by Name Limited to Input: 2557
by Name: 2556
by Data Attr: 2272
by ID Limited to Input: 2726
by ID: 5458

Answer 2

$("[id*=myBtn]").click(function () {
         // This displays the text from the Tag element of the button...    
                alert($(this).attr("tag"));
            });

Or you can write

myBtn.Attributes.Add("onClick", "return JavascriptMethod('" + ID.ToString() + "' );");

in .cs file ItemDataBound Event.