为什么 JQuery .val() 返回空字符串？答案

【问题标题】：Why JQuery .val() returns empty string?为什么 JQuery .val() 返回空字符串？
【发布时间】：2011-05-08 03:48:41
【问题描述】：

使用下面的脚本，对服务器的请求总是发送空字符串（即使值不是空的），其中数据行是：

data: "{ 'folderName': '" + $(this).val() + "' }"

正在调查的html元素是这样的：

<asp:TextBox id="searcher" runat="server" ClientIDMode="Static" CssClass="classificationFolder" />

脚本是：

<script type="text/javascript">
$(document).ready(function () {
    $(".classificationFolder").each(function () {
        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "Services/svcFolder.asmx/SearchFolders",
                    data: "{ 'folderName': '" + $(this).val() + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                value: item.Name,
                                label: item.Name + " " + item.Type
                            }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.responseText);
                    }
                });
            },
            minLength: 2,
        });
    })
});

我通过css类选择器（$（“.classificationFolder”））选择元素的原因是，该控件是用户控件，并且在同一页面中多次使用。这就是我不使用 $("#searcher") 的原因。

我在 IE8 和 Chrome 8.0.552.28 beta 中测试了代码。两种浏览器都会出现此问题。

另一方面，请求被发送到服务器，客户端成功收到响应并在客户端处理响应。

所以有人知道为什么 $(this).val() 总是返回空字符串吗？

【问题讨论】：

标签： asp.net jquery jquery-ui autocomplete

【解决方案1】：

我认为这是一个范围/上下文问题：this 不再指代输入元素，而是指自动完成。

尝试将this 存储为临时变量：

$(".classificationFolder").each(function () {
        var input_reference = this;
        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "Services/svcFolder.asmx/SearchFolders",
                    data: "{ 'folderName': '" + $(input_reference).val() + "' }",
 ...

【讨论】：

+1 无需猜测，您对 Scope 的看法是正确的。但在他的例子中，this 指的是最接近的闭包，可能是 ajax 选项或 source 参数内的匿名函数。
@AnreKR 我的意思是传递给autocomplete 函数的对象，但@Stephen 的评估可能更正确。

【解决方案2】：

source 回调不在元素的上下文中执行。
this 不是你想象的那样。

您需要在外部each 回调中保存对this 的引用。

【讨论】：

【解决方案3】：

也许this 没有指向输入字段。你的回调函数的request参数不是你要找的值吗？

【讨论】：