如何从 GridView 中的 ImageButton 打开 jQuery 对话框？

Question

如何获取 ImageButton ID 以便我可以使用它打开 jquery 对话框？

通过硬输入 ImageButton ID，它可以按预期工作。即：

$('#ContentPlaceHolder1_GridView1_linkPasswordEdit_0').click(function () {
    $('#dialog-modal2').dialog('open');
    return false;
});

但是，我想对 GridView 中的所有 ImageButton 执行此操作，而不仅仅是第一个。我尝试了各种方法，例如：

$('#ContentPlaceHolder1_GridView1_' + '<%# linkPasswordEdit.ClientID %>').click(function () {
    $('#dialog-modal2').dialog('open');
    return false;
});

或者：

$('#' + '<%# ContentPlaceHolder1.GridView1.((GridViewRow)Container).FindControl("linkPasswordEdit").ClientID %>').click(function () {
    $('#dialog-modal2').dialog('open');
    return false;
});

这是 ImageButton 的样子：

<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="linkPasswordEdit" runat="server" CausesValidation="false" OnCommand="passwordEditCommand"
    CommandArgument='<%#Eval("id")%>' ToolTip="Click to edit password" ImageUrl="~/Images/imagesActions/password_edit.png"
    AlternateText='<%#Eval("userName")%>' />
</ItemTemplate>
</asp:TemplateField>

任何帮助将不胜感激。

Answer 1

为什么不直接为 imagebutton 分配一个自定义 CSS 类（仅用于查找图像按钮）并使用 JQuery 类选择器进行关联。

$('.imageButtonFinderClass').click(function () {
    $('#dialog-modal2').dialog('open');
    return false;
});


<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="linkPasswordEdit" runat="server" CausesValidation="false" OnCommand="passwordEditCommand" CssClass="imageButtonFinderClass"
    CommandArgument='<%#Eval("id")%>' ToolTip="Click to edit password" ImageUrl="~/Images/imagesActions/password_edit.png"
    AlternateText='<%#Eval("userName")%>' />
</ItemTemplate>
</asp:TemplateField>