调用 javascript 函数时出错：ReferenceError: <function name> is not defined答案

【问题标题】：Error when javascript function is called: ReferenceError: <function name> is not defined调用 javascript 函数时出错：ReferenceError: <function name> is not defined
【发布时间】：2015-05-02 01:15:49
【问题描述】：

我动态创建了一个下拉列表。我需要动态添加onchange 事件并进行回发，以便进行数据库调用。当我更改下拉列表项时，我收到错误：

ReferenceError: UpdateLocationList 未定义。

这是我的 javascript 代码：

<head runat="server">
    <title>Locations</title>
    <meta http-equiv="Content-Language" content="en-us"/>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
    <script src = "scripts/jquery-1.11.2.min.js" type = "text/javascript"></script>   
    <script  type="text/javascript">     
        function UpdateLocationList(obj) {
            alert('In function');
            var facilityValue = document.getElementById("FacilityTypeDDL").value;
            alert(facilityValue);
            __doPostBack('FacilityTypeDDL', facilityValue);
        }     
    </script>
</head>
<body>
<%ListLocations()%>
</body>

这是后面代码中的 ListLocations() 方法：

Public Sub ListLocations()

        Response.Write("<div style='text-align:left;'>")
        Response.Write("<label>Facility Type:<select id='FacilityTypeDDL' name='FacilityTypeDDL' size='1' runat='server' onchange='UpdateLocationList(this)'>")

        For Each facility As ListItem In lstBoxFacilityTypes
            'Get the first value in the list and use the ID to to the list of locations below
            If String.Compare(facilityValueSelected, "") = 0 Then
                facilityValueSelected = facility.Value
            End If
            Response.Write("<option value=''" & facility.Value & "''>" & facility.Text & "</option>")
        Next

        Response.Write("</select></label>")
        Response.Write("</div>")
        Response.Write("<hr>")

    End Sub

缺少什么会导致函数 UpdateLocationList 未定义的错误？

更新我直接将下拉列表作为 asp:DropDownList:

添加到了 aspx 页面

 <body>
 <form id="form1" runat="server">  
        <div style='text-align:center;'>
        <a style='text-decoration:none;font-size:16px;color:blue;background-color:white;width:200px;padding:4px;' href='LocationDetails.aspx?Location_ID=0' target='detailPanel'> Add Location
        </a></div>
        &nbsp&nbsp
        <asp:Label ID="FacilityTypeLbl" runat="server">Facility Type:</asp:Label>
        <asp:DropDownList ID="FacilityTypeDDL" runat="server" AutoPostBack="true" OnSelectedIndexChanged=" FacilityTypeDDL_SelectedIndexChanged">
        </asp:DropDownList>
        <hr/>
     <%ListLocations()%>   
 </form>
</body>

在后面的代码中添加 OnSelectedChanged 事件：

Protected Sub FacilityTypeDDL_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles FacilityTypeDDL.SelectedIndexChanged
    strFacilityValue = FacilityTypeDDL.SelectedValue
    ListLocations()
End Sub

我在这个方法中设置了一个断点，它并没有在其中停止。为什么我的事件没有触发？

【问题讨论】：

看起来您正在制作自定义 DropDownList 服务器控件。你正在做的方式真的很脆弱。你想达到什么目的？
这个控件没有任何自定义。它是动态的。我正在添加到现有的应用程序。单击按钮时，它会创建一个新菜单。这就是网站的工作方式。它有什么脆弱之处？
这不是我们在 ASP.Net 中创建动态控件的方式（除非您正在使用 MVC）。 ASP.Net 是一个基于事件的模型；你不想直接操作 DOM。简而言之，您想使用服务器控件并将其动态添加到占位符（或面板）。
我不知道如何重写这部分应用程序来完成你所说的。我只是想添加到当前的应用程序中。

标签： javascript asp.net

【解决方案1】：

在 onchange 中，你应该只给出函数的名称；你不应该添加函数调用。

您最好将以下内容添加到 yopur 脚本代码中，而不是在 HTML 代码中附加事件处理程序：

$(document).ready(function() {
  $("#FacilityTypeDDL").change(UpdateLocationList);

});

另外，在

function UpdateLocationList(obj)

你可以省略参数：你不使用它（如果你会使用它，它代表事件）。

【讨论】：

你的建议，它仍然给我同样的错误。
我发现当我更改 ListLocation 函数中的函数名称时，即发生错误时显示的名称。所以，这就是我在 javascript 中实现它的方式是错误的。我尝试将脚本放在正文的右括号上方，但得到了同样的错误。任何其他建议将不胜感激！

【解决方案2】：

我无法让 asp:DropdownList 触发 SelectedIndexChanged 事件。所以我就这样完成了任务。

如上所示动态添加下拉菜单并添加调用javascript的更改事件：

onchange='UpdateLocationList()'

这个函数必须放在一个 .js 文件中。这个网站已经有一个 .js 文件。它还有一些我用来完成任务的 AJAX 调用。在 UpdateLocationList() 中，我获得了在下拉列表中设置为值属性的服务类型的 ID。然后，我使用已经是 .js 文件的一部分的函数到 LocationDetails 页面，使用服务类型 ID 仅显示该服务类型的设施。这是函数：

function updateLocationList() {
var ddlFacilityType = document.getElementById("FacilityTypeDDL");
var facilityValue = ddlFacilityType.options[ddlFacilityType.selectedIndex].value;
processAjax("/editor/Locations.aspx?Location_ID=" + facilityValue, "navPanel");

}

像魅力一样工作。

感谢您的所有帮助。

【讨论】：

回发是关键。正如我在评论中所说，您不能简单地呈现 html 标记，并希望它会附加到服务器事件。看this的回答；你可能会有一个想法。
我想我能做的是在标记中调用一个javascript函数，UpdateLoctionList。然后 javascript 使用 __doPostback() 进行回发。调用这个回发函数时，是否需要注册回发？
我更改了我的下拉列表事件，以便它使用 asp:Dropdown 列表。但是事件仍然没有触发。代码改动如上。
请创建一个新问题。否则，所有以前的答案都将无关紧要。