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

I would suggest giving them a common css class, so that you can use a class selector from jQuery targetting all the buttons not depending on the id of it. Eventually add another attribute (or another class but it's not clean) to identify the "row" clicked, if you don't want to parse the id. — Laurent S., Nov 25 '13 at 14:19
try fetching the tag attribute from the code behind. it might work better without jquery interference. — thenewseattle, Nov 25 '13 at 14:29
Thanks to Bartdude for pointing me in the right direction. My revised button declaration on my .ASPX file (adding a class): My jQuery function: $(".xxx").click(function () { alert('here'); var t = $(this).attr("tag"); alert(t); return false; }); This works! Thanks. — Ted H, Nov 25 '13 at 14:45
@Bartdude Not that there is anything wrong with your suggestion, but there is no need to add a class if its only purpose to to serve as a way to select the item in jQuery. Yes it would work, but so would just adding a 'data-' attribute and selecting on that, or selecting on the name like I show. — MikeSmithDev, Nov 25 '13 at 16:13
@MikeSmithDev > I tend to prefer using classes than part of the name for several reasons. Mainly because behind the scenes I'm quite sure it's quicker to select on class, and you can even do it natively with POJS if needed. But I do agree that semantically and logically, using the `data-` attribute is probably the best solution. — Laurent S., Nov 25 '13 at 16:23
@Bartdude you are in correct about class being quicker. I was curious and ran some tests... results are below. — MikeSmithDev, Nov 25 '13 at 16:39

score 0 · Answer 1 · edited May 23 '17 at 12:05

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

score 0 · Answer 2 · answered Nov 25 '13 at 16:54

$("[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.

ASP Repeater - catch generated button click in jQuery function

2 Answers2