Question

我是jQuery的新手，我遇到了从ASP Repeater中的ItemTemplate中生成的按钮中获取jQuery中的按钮点击事件的问题。

我花了几个小时（浪费时间）寻找可行的答案，但没有运气。

来自我的.ASPX页面的剪辑：

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

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

现在，这个jQuery工作（指定生成的按钮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>

但是，我希望能够使用将为所有生成的按钮调用click事件的通用函数 - 任何帮助表示赞赏！

Ted H

Answer 1

请注意，所有名称都以myBtn结尾（您设置ID的值）。因此，使用jQuery选择器选择名称以myBtn结尾的项目：

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

...或将select限制为仅输入：$("input[name$='myBtn']").click(function () { ...

阅读：jQuery Selectors

更新：正如Bartdude所说，在课堂上选择实际上更快。以下是使用类似于this SO answer的测试在1000个转发器项目中迭代1000次的一些结果：

使用的选择器：

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]")

<强>铬：

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

有些旧版浏览器， 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

即使是较旧的浏览器， 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"));
            });

或者你可以写

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

<。>在.cs文件中的ItemDataBound事件。

ASP Repeater - 在jQuery函数中捕获生成的按钮单击

2 个答案: