SelectedIndexChange 事件未在动态创建的下拉列表上触发答案

【问题标题】：SelectedIndexChange event not firing on dynamically created dropdownlistSelectedIndexChange 事件未在动态创建的下拉列表上触发
【发布时间】：2014-02-20 01:33:05
【问题描述】：

我有一个 Telerik RadComboBox，它在更改时会触发一些使用 AJAX 从数据库中获取一些数据并用值填充第二个下拉列表的 Javascript。问题是我想根据在第二个下拉列表中所做的选择用数据填充一些文本框。第二个下拉列表是标准的 ASP.NET 下拉列表。这是两个下拉列表的代码：

<telerik:RadComboBox ID="rcbCustomer" runat="server" CssClass="form-control field-standard-size fix-background-white input-sm" width ="300px" Height="140px"
                        EmptyMessage="Type here to find sold-to customer" LoadingMessage="Please wait, loading..." AutoPostBack="true"
                        RegisterWithScriptManager="false" EnableEmbeddedScripts="true" EnableVirtualScrolling="true" OnClientSelectedIndexChanged="rcbCustomer_IndexChanged">
                    </telerik:RadComboBox>


<asp:DropDownList ID="hidShipTo" runat="server" Height="24px" Font-Size="x-small" CssClass="form-control input-sm width-300 form-fixer" AutoPostBack="True" ></asp:DropDownList>

当第一个下拉菜单发生变化时，它会触发这个 Javascript 函数，该函数会填充第二个列表：

function rcbCustomer_IndexChanged(sender, args) {

                //var strData = $("#<%=rcbCustomer.ClientID%>").val()
                var strComboID = $find("<%=rcbCustomer.ClientID%>");
                var strValue = strComboID.get_value();
                var strData = "{strCustomerSoldSelected: '" + strValue + "' }";
                //alert(strData);
                $.ajax({
                    type: "POST",
                    url: "/webservices/ProductServer.asmx/GetShipToData",
                    data: strData,
                    contentType: "application/json; character=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        $("#<%=hidShipTo.ClientID %>").empty().append($("<option></option>").val("[-]").html("Please select"));
                        $.each(msg.d, function () {
                            $("#<%= hidShipTo.ClientID %>").append($("<option></option>").val(this['Value']).html(this['Text']));
                        });
                    },
                    failure: function (xhr, ajaxoptions, thrownError) {
                        alert("Error1:" + xhr.status);
                        alert("Error2:" + thrownError);
                    }
                });
                //alert("the end");
            }

然后我为第二个下拉列表绑定更改事件，如下所示：

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged());

然后我希望它运行另一个函数，该函数使用 AJAX 来获取数据以填充其他一些文本框。这是那个函数（现在它被设置为只发出警报，直到我知道它运行）：

 function hidShipTo_IndexChanged(sender, args) {
                var strData = "";
                alert("yes");
                $.ajax({
                    type: "POST",
                    url: "/webservices/ProductServer.asmx/PopulateShipToDetails",
                    data: strData,
                    contentType: "application/json; character=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        alert(msg);
                    },
                    failure: function (xhr, ajaxoptions, thrownError) {
                        alert("Error1:" + xhr.status);
                        alert("Error2:" + thrownError);
                    }
                });
            }

问题是更改事件似乎没有触发。关于可能是什么原因或不同方法的任何想法？

【问题讨论】：

标签： javascript jquery ajax vb.net

【解决方案1】：

您正在调用函数而不是将其分配给事件处理程序

改变

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged()); //Remove ()

到

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged);

【讨论】：

谢谢，但事件仍然没有触发

【解决方案2】：

你不是在分配一个函数，你是在调用它

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged());
                                                           ^^^

需要

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged);
                                                          ^^^

【讨论】：

谢谢，但进行该更改仍不会触发事件
添加事件时元素是否存在？您实际上是否在列表中选择了不同的选项？简单测试：console.log($("#<%=hidShipTo.ClientID%>").length); 您是否希望在用户更改或 Ajax 回调代码更改值时触发 change 事件？
是的，我已经检查了长度，它看到了选择器。我希望用户更改下拉列表时会触发更改事件。我怀疑是因为原来的 AJAX 填充了下拉列表，所以存在一个问题，因为即使我可以在下拉列表中看到 3 个项目，但当我查看源代码时，只有标记没有选项因为这些选项是由前面的 AJAX 调用添加的。有什么想法吗？
查看源代码永远不会显示更新的 html，您需要使用控制台并检查元素。

【解决方案3】：

你能看看这个服务器端指令是如何在客户端呈现的吗

    $("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged());

【讨论】：

它是这样通过的：$("#ContentPlaceHolder1_hidShipTo").change(function () { hidShipTo_IndexChanged(); });
好的，satpal给出了解决方案
不，这也没有导致事件触发。
您是否验证过您的选择标签的客户端 ID 是否真的是 ContentPlaceHolder1_hidShipTo ？
浏览器的javascript控制台有错误吗？

【解决方案4】：

处理这个问题的最好方法是从未命名的函数中调用它。

像这样：

$("#<%=hidShipTo.ClientID%>").change(function(){hidShipTo_IndexChanged();});

【讨论】：

感谢所有这些建议，但更大的问题似乎是 .change 事件根本没有触发。我写了这样的代码：$("#<%=hidShipTo.ClientID%>").change(function(){alert('yes';});，但什么也没出现！什么可能导致它不触发？
大多数情况下，事件处理程序无法绑定到事件，因为它在元素不存在时尝试分配。换句话说，在绑定发生之前 DOM 准备好非常重要。

【解决方案5】：

我通过将 ASP 下拉列表更改为常规 SELECT 输入控件并正确绑定事件并且代码现在可以正常运行来解决了这个问题。这是一个消除回发刷新的转换，所以我真的不需要 ASP 下拉列表。我仍然很好奇为什么事件不能正确绑定，但现在问题已经解决了。我想发布这个以防其他人有类似的问题。感谢大家的帮助！

【讨论】：