Question

我正在尝试创建一个小的jQuery脚本，它会使页面背景变黑，显示一个小表单，然后将表单移走并在提交/取消表单时恢复后台。

我已成功演示; d使用JSFDDLE，但我用纯HTML编写，实际上我需要在ASP.NET ASPX页面中执行此操作。

我需要弹出的小表单位于一个字段集内，在InsertItemTemplate中。我可以让背景变黑，表格弹出，但是当我按下插入或取消按钮时，我无法获得背景（div = id =＆＃34;支持＆＃34;）去远。我的jQuery无法找到按钮，即使我是通过id定位它们。

这是我的ASPX页面中的jQuery：

$(document).ready(function () {
        var btnCancel = document.getElementById('btnInsertCancel');
        var btnAddContact = document.getElementById('btnAddContact');

        // when add contact button is pressed
        $(btnAddContact).click(function () {
            $('#backing').fadeIn();
        });

        // when submit button in add customer pop up is pressed
        $(btnCancel).click(function () {
            $('#backing').fadeOut();
        });
    });

“插入项目”模板如下所示

<InsertItemTemplate>
    <fieldset id="newContact">
        <table cellpadding="2" cellspacing="0" style="height: 100%;">
            <tr>
                <td style="width: 20%;">
                    Title:
                </td>
                <td style="width: 80%; padding-left: 5px;">
                    <telerik:RadDropDownList ID="drpITitle" runat="server"
                        DataSourceID="objTitle" DataTextField="TITLEDESC" 
                        DataValueField="TITLEID" SelectedValue='<%#Bind("TITLEID") %>' >
                    </telerik:RadDropDownList>
                    <asp:RequiredFieldValidator ID="rfvTitle" runat="server" ErrorMessage="Title (Required)"
                    ValidationGroup="valClientContactI" InitialValue="" ControlToValidate="drpITitle"
                    Display="Dynamic"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Firstname:
                </td>
                <td style="width: 80%; padding-left: 5px;">
                <telerik:RadTextBox ID="txtIFirstname" Runat="server" Text='<%# Bind("CONTACTFNAME")%>'>
                </telerik:RadTextBox>
                <asp:RequiredFieldValidator ID="rfvFirstname" runat="server" ErrorMessage="First name (Required)"
                    ValidationGroup="valClientContactI" InitialValue="" ControlToValidate="txtIFirstname"
                    Display="Dynamic"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Surname:
                </td>
                <td style="width: 80%; padding-left: 5px;">
                    <telerik:RadTextBox ID="txtISurname" Runat="server" Text='<%# Bind("CONTACTSNAME")%>'>
                    </telerik:RadTextBox>
                    <asp:RequiredFieldValidator ID="rfvSurname" runat="server" ErrorMessage="Surname (Required)"
                    ValidationGroup="valClientContactI" InitialValue="" ControlToValidate="txtISurname"
                    Display="Dynamic"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    DOB:
                </td>
                <td style="width: 80%; padding-left: 5px;">
                    <telerik:RadDatePicker runat="server" ID="dtpIDOB" SelectedDate='<%# Bind("DOB")%>'>
                    </telerik:RadDatePicker>
                </td>
            </tr>
            <tr>
                <td>
                    Position:
                </td>
                <td style="width: 80%; padding-left: 5px;">
                    <telerik:RadDropDownList ID="drpIPosition" runat="server"
                        DataSourceID="objPosition" DataTextField="POSITIONDESC" 
                        DataValueField="POSITIONID" SelectedValue='<%#Bind("CONTACTPOSITIONID") %>'>
                    </telerik:RadDropDownList>
                    <asp:RequiredFieldValidator ID="rfvPosition" runat="server" ErrorMessage="Position (Required)"
                    ValidationGroup="valClientContactI" InitialValue="" ControlToValidate="drpIPosition"
                    Display="Dynamic"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Marketing:
                </td>
                <td style="width: 80%; padding-left: 5px;">
                    <asp:CheckBox ID="chkIMarketing" runat="server" 
                        Enabled="true" Checked='<%# Bind("MARKETING") %>'></asp:CheckBox>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Button ID="btnInsert" runat="server" CommandName="PerformInsert" Text="Insert" ValidationGroup="valClientContactI" ClientIDMode="Static">
                    </asp:Button>
                    <asp:Button ID="btnInsertCancel" runat="server" CommandName="Cancel" Text="Cancel" CausesValidation="false" ClientIDMode="Static">
                    </asp:Button>
                </td>
            </tr>
        </table>

    </fieldset>
    </InsertItemTemplate>

有关如何定位Inseert按钮或取消按钮的任何建议将非常感谢。

非常感谢

Answer 1

如果您可以使用ID

ID对于独特的控件是好的（如果有的话，更好，因为不应该有重复，并且jQuery查找更快）。在这个特定的情况下你将永远不会有一次可以看到多个InsertItem模板，这样您的ID就可以了。如果那不是类，请使用类而不是Anoop Joshi建议*。

*注意：您可能希望切换到类和类选择器的另一个原因是Telerik控件（您使用的）不能正确支持ClientIDMode http://www.telerik.com/forums/clientidmode-support-for-asp-net-4-0

唯一可能发生的事情是将元素动态添加到DOM中。如果情况确实如此，请切换到使用delegated这样的事件：

$(function(){
    $(document).on('click', '#btnInsertCancel', function () {
        $('#backing').fadeIn();
    });

    // when submit button in add customer pop up is pressed
    $(document).on('click' , '#btnAddContact', function () {
        $('#backing').fadeOut();
    });
});

这些听一个祖先，然后应用选择器，然后将该函数应用于生成该事件的任何匹配元素。

首选是在DOM中使用第一个不变的祖先。如果失败（您没有显示页面的其余部分），您可以使用document接收页面上的所有冒泡事件。

注意：$(function(){YOUR CODE});是$(document).ready(function () {YOUR CODE});

的首选简短版本

＆＃34;级＆＃34;基于版本

假设您必须使用类（出于上述任何原因），代码将变为：

$(function(){
    $(document).on('click', '.btnInsertCancel', function () {
        $('#backing').fadeIn();
    });

    // when submit button in add customer pop up is pressed
    $(document).on('click' , '.btnAddContact', function () {
        $('#backing').fadeOut();
    });
});

ASPX：

<td colspan="2">
    <asp:Button class="btnInsert" runat="server" CommandName="PerformInsert" Text="Insert" ValidationGroup="valClientContactI" ClientIDMode="Static">
    </asp:Button>
    <asp:Button class="btnInsertCancel" runat="server" CommandName="Cancel" Text="Cancel" CausesValidation="false" ClientIDMode="Static">
    </asp:Button>
</td>

使用jQuery </insertitemtemplate>在<insertitemtemplate>中查找按钮

1 个答案:

如果您可以使用ID

＆＃34;级＆＃34;基于版本

ASPX：