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

【问题标题】：ASP Repeater - catch generated button click in jQuery functionASP Repeater - 在 jQuery 函数中捕获生成的按钮单击
【发布时间】：2013-11-25 14:16:08
【问题描述】：

我对 jQuery 很陌生，并且在从 ASP 中继器中的 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>

但是，我希望能够使用一个通用函数，该函数将为所有生成的按钮的点击事件调用 - 感谢任何帮助！

特德赫

【问题讨论】：

我建议给他们一个通用的 css 类，这样你就可以使用来自 jQuery 的类选择器来定位所有按钮，而不依赖于它的 id。如果您不想解析 id，最终添加另一个属性（或另一个类，但它不干净）来识别单击的“行”。
尝试从后面的代码中获取标签属性。如果没有 jquery 干扰，它可能会更好地工作。
感谢 Bartdude 为我指明了正确的方向。我在 .ASPX 文件（添加类）上的修改按钮声明：我的 jQuery 函数：$(".xxx").click(function () { alert('here'); var t = $ (this).attr("tag"); alert(t); return false; });这行得通！谢谢。
@Bartdude 并不是说你的建议有什么问题，但是如果它的唯一目的是作为在 jQuery 中选择项目的一种方式，则不需要添加一个类。是的，它会起作用，但是只需添加一个“数据-”属性并选择它，或者像我显示的那样选择名称。
@MikeSmithDev > 出于几个原因，我倾向于使用类而不是名称的一部分。主要是因为在幕后我很确定在课堂上选择会更快，如果需要，您甚至可以使用 POJS 本地完成。但我同意从语义和逻辑上讲，使用data- 属性可能是最好的解决方案。

标签： javascript jquery asp.net vb.net

【解决方案1】：

$("[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 事件。

【讨论】：

【解决方案2】：

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

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

...或将选择限制为仅输入：$("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

【讨论】：