将 JavaScript 个变量传递给匿名函数

Question

我正在使用 jQuery 的 Ajax 方法异步发送 POST 请求，用户在表单中输入 "name" 和 "comment" 值ID 分别为 name 和 comment，comment.php 页面 returns HTML 消息（成功或错误）显示在 #info div.

到目前为止，一切正常，评论已添加到数据库，并在 #comments table 的页面刷新时显示。现在我只想将用户名和评论直接添加到评论中 table 但我有一个问题，我无法从匿名内部访问 name 和 comment 变量在 .done() 方法中调用的函数。

这是我的代码：

var name = $('#name').val();
var comment = $('#comment').val();

var data = "name="+name+"&comment="+comment;

$.ajax(
        {
            type: "POST",
            url: "comment.php",
            data: data // Provided form data
        }
    ).done
    (
        function(data) // Returned data from URL endpoint
        {
            // Show returned message
            $('#info').html(data);

            var newRowContent = '<tr> <td>'+name+'</td> <td>'+comment+'</td> </tr>';

            $(newRowContent).appendTo( $('#comments') );
        }
    );

显然，简单地在匿名函数的参数中添加 name 和 comment 是行不通的，变量声明在范围之外，所以我不确定为什么它们会导致空在 table 上打印时的字符串。如果您能提供帮助并解释我在这里没有得到的内容，我将不胜感激。

更新：这是一个示例JSFiddle，说明我正在尝试做的事情，它在这里有效。

更新： 我想我已经确定了问题所在，我用来从字段值中分配值的 ID selector 不起作用由于某种原因，这会将变量保留为空字符串，这也是存储在数据库中的内容。

更新： 我终于找到了原因，我使用的表格被包裹在 div 块中 display; none 所以只显示一旦用户单击 "show comments" 按钮，表单就可以工作了。问题是 jQuery 值 select 或 $('').val(); 以不同方式对待 "hidden" 输入，我只能找到可追溯到 2009-2011 年的适用于旧版本的答案jQuery 而不是这一个。

我希望有人能回答我如何通过 ID select 显示 display: none 样式的 div 中输入的值并由 display: none 填充用户。

Answer 1

我认为这可能是由 "out of scope behavior" 引起的。您可以尝试 return 从 URL 端点提交的数据（名称，评论），然后获取这些值。类似于：

 function(data) // Returned data from URL endpoint
        {
            // First you need to parse the json data
            data = JSON.parse(data);
            // Show returned message
            $('#info').html(data['info']);

            // Then you get the data returned
            var newRowContent = '<tr> <td>'+ data['name'] +'</td> <td>'+ data['comment'] +'</td> </tr>';

            $(newRowContent).appendTo( $('#comments') );
        }

Off course, this assuming that you're returning json data. Hope it helps! ;)

Answer 2

我已经解决了这个问题，如我的第三次更新所述，问题是输入在 div 和 display: none 中，这使得它在页面加载时隐藏，并且仅在以后显示单击按钮显示它。问题在于它的显示方式。

我的旧方法是使用 [=16] 将 div 中包含的 display: none 和 ID #commentForm 中的 HTML 复制到空的 div =] 方法，导致输入 ID 在页面中出现 2 次，因此 $() 选择器 return 为空值。

我所做的是通过删除 style="display: none" 将 jQuery 更改为仅 "unhide" HTML：

$('#commentForm').removeAttr('style');

仅此一项，就可以使用我上面问题中出现的 AJAX 代码成功检索输入值。我希望这对可能遇到类似情况的人有所帮助。

将 JavaScript 个变量传递给匿名函数

Passing JavaScript variables to anonymous function

javascript

ajax

jquery

dom

selector