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

Question

使用下面的脚本,对服务器的请求总是发送空字符串(即使值不是emtpty),其中数据行是:

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"))选择元素的原因是,该控件是一个用户控件,并且在同一页面中多次使用.这就是为什么我不使用$("#搜索者").

我在IE8和Chrome 8.0.552.28 beta中测试了代码.这两个浏览器都出现了这个问题.

另一方面,请求被发送到服务器,客户端成功接收响应并且在客户端上处理响应.

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

Answer 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() + "' }",
 ...