Question

<a href="#addFriend" rel="facebox" title="[+] add <?php echo $showU["full_name"]; ?> as friend">
    <div class="addFriend"></div></A>

<div id="addFriend" style="display:none; margin: auto;">
    <form action="javascript:DoFriendRequest()" method="post">
        <input name="commentFriend" type="text" id="commentFriend" value="" size="22"> 
        <input name="submit" type="submit" id="submit" value="Send">
    </form>
</div>

我的表单在此元素内部是一个jquery灯箱时，字段#commentFriend在DoFriendRequest中获取空值

function DoFriendRequest() {
    var wrapperId = '#insert_svar';
    $.ajax({ 
        type: "POST",
        url: "misc/AddFriendRequest.php",
        data: {
            mode: 'ajax',
            comment : $('#commentFriend').val() 
        },
        success: function(msg) {
            $(wrapperId).prepend(msg);
            $('#commentFriend').val("");
        }
    });
}

更新回答

但是当我删除display:none时，它就可以了。我该如何解决这个问题？

Answer 1

对于display:none的字段，似乎val()无效。

我使用attr()：

绕过了这种行为

$('input').attr('value',myNewValue);

Answer 2

有三种方法可以解决这个问题;

使元素可见，更新它，然后再次隐藏它。
detach()来自DOM的元素，使其可见，更新，隐藏它，然后重新插入DOM。
clone()元素，使其可见，更新，隐藏，将其插入DOM并删除原始元素。

方法＃2和＃3可能是你最好的选择，因为它们不会触发重绘。所有操作都是对DOM“外部”的元素进行的（如果你愿意，可以在内存中）。这样你的UI就不会跳/滑动/移动。

方法＃3：

$(function ()
{
    var e = $("...");
    var c = e.clone();

    c.show();
    c.html("...");
    c.hide();

    e.after(c);
    e.remove();        
});

射击游戏版本（未经测试）：

var e = $("...");

e.append(e.clone().show().html("...").hide()).remove();

方法＃2：

注意：您需要一个容器，您可以将分离的元素重新插入

$(function ()
{
    var e = $("...");
    var c = $("container");

    e.detach();
    e.show();
    e.html("...");
    e.hide();
    c.add(e);    
});

只是为了好的措施 - 没有经过测试 - 更短的版本：

$("container").add($("...").detach().show().html("...").hide());

Answer 3

我有同样的问题。上述解决方案都不适合我。我最终可以使用DOM元素获取隐藏输入的值：

var el = document.getElementById("commentFriend");
var hiddenValue =  el.getAttribute("value");

Answer 4

答案太迟了但也许对某人来说很好。如果你想要一些带有display：none和使用jQuery或JS函数的元素，你需要先用jQuery隐藏元素，接下来一切都很好，你可以用addClass来定义你的类或用.hide()和{ {1}}。

例如

.show()

与您为示例类.hidden创建的CSS相同并执行此操作。

CSS

$(document).ready(function() {
    $('element1').hide();
    $('element2').hide();

    var element1 = $('element1').val();
    console.log(element1);
});

jQuery的：

.hidden {
    display:none;
}

Whit JavaScript会为你的元素添加CSS类。

jQuery val（）里面显示：none

4 个答案: