control.clientid 导致 javascript 错误“无法读取 null 的点击属性”答案

【问题标题】：control.clientid causes javascript error "cannot read click property of null"control.clientid 导致 javascript 错误“无法读取 null 的点击属性”
【发布时间】：2015-05-18 12:06:43
【问题描述】：

我正在为我的一个下拉字段使用 Telerik 自动完成框。当用户按下 enter 时，telerik 自动完成框旨在关闭下拉菜单。我的目标是当用户按下输入 btnServicesSearch 按钮时将被单击。我已经尝试将现有面板包装在整个表单周围并创建 efault 按钮，但这仍然不起作用，因为“输入键”只会按照 Telerik 的指示关闭下拉菜单。我创建了一个 control.clientid，当用户按下回车键时它会触发，但是在控制台中我收到错误“无法读取 null 的点击属性”。

<script>
    var handler = Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown;
    Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown = function (e) {

        handler.apply(this, [e]); // Let AutoCompleteBox finish it's internal logic

        if (e.keyCode == Sys.UI.Key.enter) {
            this._onBlur();

            //$get("btnServicesSearch").click();
            $get('<%#btnServicesSearch.ClientID%>').click();
            
        }
    }
</script>
<div class="row grid">
    <div class="col-md-12">
        <h2>I'm Searching For:</h2>
    </div>
	<div class="col-md-12">
		<div class="cs-form-service">
			<label class="control-label">Start typing the name of a service</label>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
				<telerik:RadAutoCompleteBox ID="racServices" runat="server" DropDownHeight="150" Skin="SJP" EnableEmbeddedSkins="false"
					IsCaseSensitive="false" InputType="Text" TextSettings-SelectionMode="Single" AllowCustomEntry="true" DropDownPosition="Static"
                    EmptyMessage="Enter first few letters" ClientIDMode="Static" EnableClientFiltering="true" CssClass="input-space" DropDownWidth="224" />
			</telerik:RadAjaxPanel>
		</div>
	</div>
</div>
<div class="row grid">
	<div class="col-md-8 col-sm-12 col-xs-12">
		<div class="col-md-6 col-sm-6 col-xs-6">
			<div class="input-within">
				<label class="control-label">Near</label>
                <asp:TextBox ID="txtZip" runat="server" CssClass="form-control input-sm" placeholder="ZIP Code" />
			</div>
		</div>
		
		<div class="col-md-6 col-sm-6 col-xs-6">
			<div class="input-within">
				<label class="control-label">Within</label>
					<asp:DropDownList ID="ddlRadius" runat="server" CssClass="form-control small-text">
                        <asp:ListItem Value="5" Text="Within 5 miles" />
                        <asp:ListItem Value="10" Text="Within 10 miles" />
                        <asp:ListItem Value="15" Text="Within 15 miles" />
                        <asp:ListItem Value="20" Text="Within 20 miles" />
						<asp:ListItem Value="25" Text="Within 25 miles" />
                    </asp:DropDownList>
			</div>
		</div>
	</div>
              
	<div class="col-md-4 col-sm-12 col-xs-12">
		<asp:Button ID="btnServicesSearch" runat="server" Text="Search" OnClick="btnSearch_Click" CssClass="btn btn-primary btn-md btn-full btn-service-search" />
	</div>
</div>

【问题讨论】：

我尝试将脚本包装在 $(document).ready( 以及页面末尾。仍然有错误。

标签： c# asp.net telerik autocompletebox

【解决方案1】：

您需要在 DOM 准备好并将控件加载到其中后运行脚本。目前，根据执行流程，您的脚本将在视图上生成控件之前首先被调用，这就是它变为NULL 并且您收到该错误的原因。

您可以尝试将脚本放在页面末尾。此外，在开始在脚本中操作控件之前，请确保已加载控件。

希望这会有所帮助。

【讨论】：

【解决方案2】：

Harvey 所说的 - 将带有覆盖的 <script> 放在页面末尾，这应该可以让您正确覆盖。

还有

从 AutoCompleteBox 中移除 ClientIDMode=Static
试试__doPostBack("<%=btnServicesSearch.UniqueID%>", "");而不是click()

【讨论】：

【解决方案3】：

你们一直都是正确的，我没有提到的一件事是这是一个用户控件。这是一个 DOM 问题，将代码放在母版页中只是为了测试有效

【讨论】：