嵌套Gridview的FooterControl中未触发javascript change（）函数

我有一个嵌套的gridview，它有一个页脚行来插入数据。展开父行时，将创建页脚控件。有两个选定的下拉列表，其中第二个下拉列表依赖于第一个下拉列表。当第一个下拉列表中的值更改时，将启用第二个下拉列表并创建一个列表。问题是，当我在第一个下拉列表中更改值时，不会触发更改事件。我有编辑功能，可以在endRequest功能中正常工作。但是插入控件不起作用

这是标记：

 <asp:UpdatePanel ID="updatePnlDeviceNestedGrid" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="div<%# Eval("RecipientID") %>" style="display:none">
            <asp:GridView ID="RecipientDeviceGridView" runat="server" AutoGenerateColumns="false" CssClass="grid" ShowFooter="true" Caption="Device Information" 
                CaptionAlign="Top" AllowPaging="true" PageSize="3" HorizontalAlign="Left"
                 onpageindexchanging="RecipientDeviceGridView_PageIndexChanging" 
                 OnPageIndexChanged="RecipientDeviceGridView_PageIndexChanged" 
                 onrowcommand="RecipientDeviceGridView_RowCommand" 
                 onrowediting="RecipientDeviceGridView_RowEditing"
                 onrowupdating="RecipientDeviceGridView_RowUpdating"
                 OnRowCancelingEdit="RecipientDeviceGridView_RowCancelingEdit"
                 OnRowDeleting="RecipientDeviceGridView_RowDeleting"
                 OnRowDataBound="RecipientDeviceGridView_RowDataBound">
                <Columns>
                    <asp:TemplateField HeaderText="DeviceID">
                        <ItemTemplate>
                            <asp:Label ID="recdevgvLblDeviceID" runat="server" Text='<%# Bind("DeviceID") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Device"  ItemStyle-Wrap="false">
                        <ItemTemplate>
                            <asp:Label ID="recdevgvDeviceID" runat="server" Visible="false" Text='<%# Bind("DeviceID") %>'></asp:Label>
                            <asp:Label ID="recdevgvLblDeviceName" runat="server" Text='<%# Bind("DeviceName") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="recdevgvEditDeviceID" runat="server" Visible="false" Text='<%# Bind("DeviceID") %>'></asp:Label>
                            <asp:Label ID="recdevgvEditDeviceName" runat="server" Visible="false" Text='<%# Bind("DeviceName") %>'></asp:Label>
                            <asp:DropDownList ID="recdevgvDDListDeviceName" runat="server" ClientIDMode="Static" 
                                data-placeholder="Choose device…" class="chosen-single">
                            </asp:DropDownList>
                            <asp:RequiredFieldValidator ID="recdevReqValueDDLDeviceNameEdit" runat="server"  
                                    ControlToValidate="recdevgvDDListDeviceName" ValidationGroup="recdevEditDeviceValidation" 
                                    ErrorMessage="Selection required." CssClass="message-error-dropdown">
                            </asp:RequiredFieldValidator>
                        </EditItemTemplate>
                        <FooterTemplate> 
                            <asp:DropDownList ID="recdevgvDDListDeviceNameInsert" runat="server" ClientIDMode="Static"
                                data-placeholder="Choose device..." class="chosen-single">
                            </asp:DropDownList>
                            <asp:RequiredFieldValidator ID="recdevReqValueDDLDeviceNameInsert" runat="server" InitialValue="0" 
                                ControlToValidate="recdevgvDDListDeviceNameInsert" ValidationGroup="recdevInsertDeviceValidation" 
                                ErrorMessage="Selection required." CssClass="message-error-dropdown">
                            </asp:RequiredFieldValidator>
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Service Provider">
                        <ItemTemplate>
                            <asp:Label ID="recdevgvLblServiceName" runat="server" Text='<%# Bind("ServiceName") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="recdevgvEditServiceName" runat="server" Visible="false" Text='<%# Bind("ServiceName") %>'></asp:Label>
                            <asp:DropDownList ID="recdevgvDDListServiceName" runat="server" ClientIDMode="Static" 
                                OnSelectedIndexChanged="RecipientDeviceGridView_SelectedIndexChanged_EditServiceName" AutoPostBack="true" EnableViewState="true"
                                 data-placeholder="Choose service…" class="chosen-single">
                            </asp:DropDownList>
                            <asp:RequiredFieldValidator ID="recdevReqValueDDLServiceNameEdit" runat="server" 
                                    ControlToValidate="recdevgvDDListServiceName" ValidationGroup="recdevEditDeviceValidation" 
                                    ErrorMessage="Selection required." CssClass="message-error-dropdown">
                            </asp:RequiredFieldValidator>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:DropDownList ID="recdevgvDDListServiceNameInsert" runat="server" ClientIDMode="Static" Enabled="false"
                                OnSelectedIndexChanged="RecipientDeviceGridView_SelectedIndexChanged_InsertServiceName" AutoPostBack="true" EnableViewState="true" 
                                data-placeholder="Choose service…" class="chosen-single">
                            </asp:DropDownList>
                            <asp:RequiredFieldValidator ID="recdevReqValueDDLServiceNameInsert" runat="server" InitialValue="0" 
                                    ControlToValidate="recdevgvDDListServiceNameInsert" ValidationGroup="recdevInsertDeviceValidation" 
                                    ErrorMessage="Selection required." CssClass="message-error-dropdown">
                            </asp:RequiredFieldValidator>
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Address">
                        <ItemTemplate>
                            <asp:Label ID="recdevgvLblAddress" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox ID="recdevgvTxtBoxAddress" runat="server" Text='<%# Bind("Address") %>' ClientIDMode="Static"></asp:TextBox>
                            <asp:Label ID="recdevgvEditAddressExt" runat="server" Visible="false" Text='<%# Bind("ServiceExtension") %>' 
                                    ClientIDMode="Static">
                            </asp:Label>
                            <asp:RequiredFieldValidator ID="recdevReqValueAddressEdit" runat="server" 
                                    ControlToValidate="recdevgvTxtBoxAddress" ValidationGroup="recdevEditDeviceValidation" 
                                    ErrorMessage="Required field." CssClass="message-error">
                            </asp:RequiredFieldValidator>
                            <asp:CustomValidator ID="recdevCustomValAddressEdit" runat="server" ControlToValidate="recdevgvTxtBoxAddress" CssClass="message-error" 
                                ErrorMessage="*" ClientValidationFunction="ValidateAddressEdit" EnableClientScript="true" 
                                ValidationGroup="recdevEditDeviceValidation">
                            </asp:CustomValidator>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="recdevgvTxtBoxAddressInsert" runat="server" ClientIDMode="Static"></asp:TextBox>
                            <asp:Label ID="recdevgvAddressExtInsert" runat="server" Visible="false" ClientIDMode="Static"></asp:Label>
                            <asp:RequiredFieldValidator ID="recdevReqValueAddressInsert" runat="server" 
        ControlToValidate="recdevgvTxtBoxAddressInsert" ValidationGroup="recdevInsertDeviceValidation" 
        ErrorMessage="Required field." CssClass="message-error">
</asp:RequiredFieldValidator>
                            <asp:CustomValidator ID="recdevCustomValAddressInsert" runat="server" ControlToValidate="recdevgvTxtBoxAddressInsert" CssClass="message-error" 
    ErrorMessage="*" ClientValidationFunction="ValidateAddressInsert" EnableClientScript="true" 
    ValidationGroup="recdevInsertDeviceValidation">
</asp:CustomValidator>
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Active">
                        <ItemTemplate>
                            <asp:Label ID="recdevgvLblActive" runat="server" Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:DropDownList ID="recdevgvDDListActive" runat="server" class="no-chosen"
                                Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'>
                                <asp:ListItem>Yes</asp:ListItem>
                                <asp:ListItem>No</asp:ListItem>
                            </asp:DropDownList>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:DropDownList ID="recdevgvDDListActiveInsert" runat="server" class="no-chosen">
                                <asp:ListItem Selected="True">Yes</asp:ListItem>
                                <asp:ListItem>No</asp:ListItem>
                            </asp:DropDownList>
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Cortext Enabled">
                        <ItemTemplate>
                            <asp:Label ID="recdevgvLblCortextEnabled" runat="server" Text='<%# (Boolean.Parse(Eval("CortextEnabled").ToString())) ? "Yes" : "No" %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Action" ShowHeader="False" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="Center">
                        <ItemTemplate>
                            <asp:Button ID="recdevgvEditButton" runat="server" CausesValidation="True" CommandName="Edit" 
            Text="Edit" CssClass="gridActionbutton" ValidationGroup="EditDeviceValidation"></asp:Button>
&nbsp;<asp:Button ID="recdevgvDeleteButton" runat="server" CausesValidation="False" CommandName="Delete" 
            Text="Delete" CssClass="gridActionbutton"  OnClientClick="return confirm('Are you sure you want to delete this Device Information?')" >
                            </asp:Button>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Button ID="recdevgvUpdateButton" runat="server" CausesValidation="True" ValidationGroup="recdevEditDeviceValidation" CommandName="Update" 
                Text="Update" CssClass="gridActionbutton"></asp:Button>
&nbsp;<asp:Button ID="recdevgvCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" 
                Text="Cancel" CssClass="gridActionbutton"></asp:Button>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:Button ID="recdevgvAddButton" runat="server" CommandName="Add" Text="Add Device" CausesValidation="true" 
            CssClass="gridActionbutton" ValidationGroup="recdevInsertDeviceValidation"></asp:Button>
                        </FooterTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

这是javascript：

 //This change function is when the Device grid is in Insert Mode
        $("#recdevgvDDListDeviceNameInsert").change(function () {
            alert('Ready Fn - Insert: Device name DDL change fn');
            $("#recdevgvDDListServiceNameInsert").prop("disabled", false);
            $("#recdevgvDDListServiceNameInsert").val('');
            $("#recdevgvDDListServiceNameInsert").chosen({
                search_contains: true,
                no_results_text: "Sorry, no match!"
            });

            var DeviceSelValue = $(this).val();
            $("#recdevgvDDListServiceNameInsert").children("option").hide();
            $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");

            switch (DeviceSelValue) {
                case "1":
                    $("#recdevgvDDListServiceNameInsert option[value*='cell']").show();
                    $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
                    $("#recdevgvAddressExtInsert").hide();
                    break;
                case "2":
                    $("#recdevgvDDListServiceNameInsert option[value*='email']").show();
                    $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
                    $("#recdevgvAddressExtInsert").hide();
                    break;
                case "3":
                    $("#recdevgvDDListServiceNameInsert option[value*='page']").show();
                    $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
                    $("#recdevgvAddressExtInsert").hide();
                    break;
                default:
                    break;
            }
        });

$(document).ready(function () {
    // alert("ready function");
    //Configure the DropDownBox using the 'chosen' jquery plugin
    $(".chosen-single").chosen({
        search_contains: true,
        width: "200px",
        no_results_text: "Sorry, no match!"
    });
});

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);

function onEndRequest(sender, args) {
    if (sender._postBackSettings.panelsToUpdate != null) {
        $("select:not(.chosen-select, .no-chosen)").chosen({
            search_contains: true,
            width: "200px",
            no_results_text: "Sorry, no match!"
        });
    };
//more code to activate the dropdowns in Edit Mode...
};
//This change function is when the Device grid is in Insert Mode
 $(document).on("change", "#recdevgvDDListDeviceNameInsert", function () {
     alert('Ready Fn - Insert: Device name DDL change fn');
      $("#recdevgvDDListServiceNameInsert").prop("disabled", false);
      $("#recdevgvDDListServiceNameInsert").val('');
      $("#recdevgvDDListServiceNameInsert").chosen({
          search_contains: true,
          no_results_text: "Sorry, no match!"
      });

     var DeviceSelValue = $(this).val();
     $("#recdevgvDDListServiceNameInsert").children("option").hide();
     $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");

     switch (DeviceSelValue) {
         case "1":
             $("#recdevgvDDListServiceNameInsert option[value*='cell']").show();
             $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
             $("#recdevgvAddressExtInsert").hide();
             break;
         case "2":
             $("#recdevgvDDListServiceNameInsert option[value*='email']").show();
             $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
             $("#recdevgvAddressExtInsert").hide();
             break;
         case "3":
             $("#recdevgvDDListServiceNameInsert option[value*='page']").show();
             $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
             $("#recdevgvAddressExtInsert").hide();
             break;
         default:
             break;
     }
 });

更新 谢谢Aleksey的建议。我的更改功能现在被触发。但是对ServiceName下拉列表的更改没有发生。当嵌套网格处于编辑模式时，我在此页面上使用此函数调用。 当我更改设备名称下拉列表的值时，服务名称下拉列表未启用，并且不显示“选择服务”值。这就好像选择器recdevgvDDListServiceNameInsert无法识别一样。 该控件具有ClientIDMode=Static属性

该控件位于更新面板UpdatepMLDeviceTestedGrid和Gridview RecipientDeviceGridView中。我尝试将更新面板控件添加为选择器中的父控件，但没有成功。 我使用document.ready，为了使编辑模式正常工作，我使用endRequest函数

我尝试了bindEvent函数，但得到了相同的结果

这是我的javascript：

 //This change function is when the Device grid is in Insert Mode
        $("#recdevgvDDListDeviceNameInsert").change(function () {
            alert('Ready Fn - Insert: Device name DDL change fn');
            $("#recdevgvDDListServiceNameInsert").prop("disabled", false);
            $("#recdevgvDDListServiceNameInsert").val('');
            $("#recdevgvDDListServiceNameInsert").chosen({
                search_contains: true,
                no_results_text: "Sorry, no match!"
            });

            var DeviceSelValue = $(this).val();
            $("#recdevgvDDListServiceNameInsert").children("option").hide();
            $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");

            switch (DeviceSelValue) {
                case "1":
                    $("#recdevgvDDListServiceNameInsert option[value*='cell']").show();
                    $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
                    $("#recdevgvAddressExtInsert").hide();
                    break;
                case "2":
                    $("#recdevgvDDListServiceNameInsert option[value*='email']").show();
                    $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
                    $("#recdevgvAddressExtInsert").hide();
                    break;
                case "3":
                    $("#recdevgvDDListServiceNameInsert option[value*='page']").show();
                    $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
                    $("#recdevgvAddressExtInsert").hide();
                    break;
                default:
                    break;
            }
        });

$(document).ready(function () {
    // alert("ready function");
    //Configure the DropDownBox using the 'chosen' jquery plugin
    $(".chosen-single").chosen({
        search_contains: true,
        width: "200px",
        no_results_text: "Sorry, no match!"
    });
});

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);

function onEndRequest(sender, args) {
    if (sender._postBackSettings.panelsToUpdate != null) {
        $("select:not(.chosen-select, .no-chosen)").chosen({
            search_contains: true,
            width: "200px",
            no_results_text: "Sorry, no match!"
        });
    };
//more code to activate the dropdowns in Edit Mode...
};
//This change function is when the Device grid is in Insert Mode
 $(document).on("change", "#recdevgvDDListDeviceNameInsert", function () {
     alert('Ready Fn - Insert: Device name DDL change fn');
      $("#recdevgvDDListServiceNameInsert").prop("disabled", false);
      $("#recdevgvDDListServiceNameInsert").val('');
      $("#recdevgvDDListServiceNameInsert").chosen({
          search_contains: true,
          no_results_text: "Sorry, no match!"
      });

     var DeviceSelValue = $(this).val();
     $("#recdevgvDDListServiceNameInsert").children("option").hide();
     $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");

     switch (DeviceSelValue) {
         case "1":
             $("#recdevgvDDListServiceNameInsert option[value*='cell']").show();
             $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
             $("#recdevgvAddressExtInsert").hide();
             break;
         case "2":
             $("#recdevgvDDListServiceNameInsert option[value*='email']").show();
             $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
             $("#recdevgvAddressExtInsert").hide();
             break;
         case "3":
             $("#recdevgvDDListServiceNameInsert option[value*='page']").show();
             $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
             $("#recdevgvAddressExtInsert").hide();
             break;
         default:
             break;
     }
 });

更新 我在编辑模式下遇到了这个问题。。。 我将其添加到更改功能中，下拉列表至少显示了选项ChooseService

但是，下拉列表仍然未启用

更新 为了启用已禁用的选定下拉列表，我无法使用ID值，但是： $select.propdisabled，false；

---

启用后，函数的其余部分就可以工作了。

我假设在初始页面调用时，页面上显示了UpdatePNDeviceEndGrid，因此让我们将ClientMode=Static添加到updatePanel中，以使js更具可读性

 <asp:UpdatePanel ID="updatePnlDeviceNestedGrid" runat="server" UpdateMode="Conditional" ClientIDMode="Static">

若不进行其他更改，也可以将其直接附加到文档

 $(document).on('change', '#recdevgvDDListDeviceNameInsert'

这里是jQuery文档参考

委派事件的优点是，它们可以处理来自子元素的事件，这些子元素将在以后添加到文档中。通过选择在附加委派事件处理程序时保证存在的元素，可以使用委派事件来避免频繁附加和删除事件处理程序。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，如果事件处理程序希望监视文档中的所有冒泡事件，则可以是文档。文档元素在加载任何其他HTML之前都在文档的头部可用，因此可以安全地在那里附加事件，而无需等待文档准备就绪

更新

另一方面，您可以在每次部分回发时将其重新绑定，如下面的答案所示

例如，您将创建绑定事件的函数

function bindEvents(){
   $("#recdevgvDDListDeviceNameInsert").change(function () {
       // your code......
   }

   //some other bindings
}

// initial page load
$(function () {
   bindEvents();
})

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
   // re-bind your jQuery events here after updatepanel update
    bindEvents(); 
});

---

谢谢你的代码和解释。越来越清楚了！现在调用更改事件。但是，change事件中与控件recdevgvDDListServiceNameInsert相关的所有函数调用都不起作用。控件未启用，等等。如果您不想更改所有evend绑定，请参阅我的更新我在上面添加了相关的javascript代码。我确实复习了UpdatePanel的答案。这帮助我以前获得编辑模式的工作。我认为我的问题与下拉列表的选择器有关，下拉列表在更改事件中没有更改。但我不确定…不要介意删除注释，在其他地方查看问题抱歉不得不离开，还无法从代码中发现错误，例如在firebug中，您可以轻松检查元素，或在console选项卡的右窗格中运行js代码，也可以使用console，登录js代码以查看发生了什么

function bindEvents(){
   $("#recdevgvDDListDeviceNameInsert").change(function () {
       // your code......
   }

   //some other bindings
}

// initial page load
$(function () {
   bindEvents();
})

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
   // re-bind your jQuery events here after updatepanel update
    bindEvents(); 
});