单击GridView中的链接按钮时无法触发jquery警报

Question

当用户尝试删除记录表单Gridview时，我写了一个确认，如下

<head runat="server">
<title></title>
<style type="text/css">
    BODY, HTML
    {
        padding: 0px;
        margin: 0px;
    }
    BODY
    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        background: #FFF;
        padding: 15px;
    }

    H1
    {
        font-size: 20px;
        font-weight: normal;
    }

    H2
    {
        font-size: 16px;
        font-weight: normal;
    }

    FIELDSET
    {
        border: solid 1px #CCC;
        -moz-border-radius: 16px;
        -webkit-border-radius: 16px;
        border-radius: 16px;
        padding: 1em 2em;
        margin: 1em 0em;
    }

    LEGEND
    {
        color: #666;
        font-size: 16px;
        padding: 0em .5em;
    }

    PRE
    {
        font-family: "Courier New" , monospace;
        font-size: 11px;
        color: #666;
        background: #F8F8F8;
        padding: 1em;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
    }

    /* Custom dialog styles */
    #popup_container.style_1
    {
        font-family: Georgia, serif;
        color: #A4C6E2;
        background: #005294;
        border-color: #113F66;
    }

    #popup_container.style_1 #popup_title
    {
        color: #FFF;
        font-weight: normal;
        text-align: left;
        background: #76A5CC;
        border: solid 1px #005294;
        padding-left: 1em;
    }

    #popup_container.style_1 #popup_content
    {
        background: none;
    }

    #popup_container.style_1 #popup_message
    {
        padding-left: 0em;
    }

    #popup_container.style_1 INPUT[type='button']
    {
        border: outset 2px #76A5CC;
        color: #A4C6E2;
        background: #3778AE;
    }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
    $(document).ready(function () {
        var id = $("<%# GridView1.ClientID %> tr").find('#btnDelete.ClientID');
        $("#btn").click(function () {
            jConfirm('Are you sure you want to delete?', 'Confirmation Dialog', function (r) {
                if (r == true) {
                    __doPostBack(id, "");
                }
                else
                    return false;
            });
        });
    });
  </script>
  </head>

我的GridView如下

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
        ForeColor="#333333" OnRowEditing="GridView1_RowEditing" OnRowCancelingEdit="GridView1_RowCancelingEdit"
        OnRowUpdating="GridView1_RowUpdating" OnRowDeleting="GridView1_RowDeleting" Width="574px">
        <RowStyle BackColor="#EFF3FB" />
        <Columns>
            <asp:TemplateField HeaderText="ID">
                <ItemTemplate>
                    <asp:Label ID="Id" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:Label ID="eid" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Name">
                <ItemTemplate>
                    <asp:Label ID="Name" runat="server" Text='<%#Eval("Name") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="ename" runat="server" Text='<%#Eval("Name") %>'></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Address">
                <ItemTemplate>
                    <asp:Label ID="Address" runat="server" Text='<%#Eval("Address") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="eprice" runat="server" Text='<%#Eval("Address") %>'></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="">
  <ItemTemplate>
                    <asp:LinkButton ID="edit" runat="server" Text="Edit" CommandName="edit"></asp:LinkButton>
                    <input id="btn" type="button" value="Delete" class="submit_12" />
                    <asp:LinkButton ID="btnDelete" runat="server" Visible="false" Text="Delete" CommandName="Delete" />
                </ItemTemplate>                    <EditItemTemplate>
                    <asp:LinkButton ID="update" runat="server" Text="Update" CommandName="update"></asp:LinkButton>
                    <asp:LinkButton ID="cancel" runat="server" Text="Cancel" CommandName="cancel"></asp:LinkButton>
                </EditItemTemplate>
            </asp:TemplateField>
        </Columns>
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BackColor="#2461BF" />
        <AlternatingRowStyle BackColor="White" />
    </asp:GridView>

但是我无法获得所需的警报，任何人都可以告诉我哪里出了问题

我正在使用此网站的警报

http://labs.abeautifulsite.net/archived/jquery-alerts/demo/

添加了所有必需的脚本，但仍然存在相同的问题

添加脚本

Answer 1

您可能没有在页面中注册JQuery。

看看： http : //docs.jquery.com/How_jQuery_Works#jQuery : _The_Basics

了解如何在页面上包含JQquery。

Answer 2

如果上面的代码包含了页面上的所有内容，那么您将缺少对jQuery库的引用。

jquery.alert.js只是主jQuery库的插件，因此您需要先引用它，然后再引用Alert插件。

<script src="[path-to-jquery-library]" type="text/javascript"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

还要仔细检查什么是jquery库所需的最低版本，以便使用此插件。

编辑更新代码后，我可以看到您的javascript引用顺序错误。 请查看我上面的订单。

Answer 3

我假设您正在尝试将Click事件分配给所有删除按钮？ 但是您的jQuery选择器表明您正在寻找ID为“ btnDelete”的单个元素。 无论如何，GridView按钮将具有更长的ID，因为.NET将根据控件层次结构分配ID。 可能更像是：

GridView1 $ row1 $ btn删除

GridView1 $ row2 $ btn删除

等等

您可以查看页面源以获取确切的名称，但是您的选择器错误（即使您只选择了一个按钮）。 在您的btnDelete中添加一个唯一的CssClass：

<asp:LinkButton ID="btnDelete" runat="server" Visible="false" Text="Delete" CommandName="Delete" CssClass="promptDelete" />

（请注意，.css文件中不必存在此CssClass），然后将选择器更改为：

$(".promptDelete").click(function () {
    jConfirm('Are you sure you want to delete?', 'Confirmation Dialog', function (r) {
        if (r == true) {
            __doPostBack(id, "");
        }
        else
            return false;
    });
});