jquery html() 不返回更改的值答案

【问题标题】：jquery html() does not return changed valuesjquery html() 不返回更改的值
【发布时间】：2011-08-17 16:03:40
【问题描述】：

我有一个带有这样文本框的表单：

<html>
<head>
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
</head>
<body>
    <input type="text" id="myTextBox" />
</body>
</html>

当我在 myTextBox 中输入内容时，该值可通过 $("#myTextBox").val() 获得，但如果我输入 $("body").html()，则不会显示该值。如何获取 html 字符串和更新的表单值？谢谢！

【问题讨论】：

你为什么要这样做？
我需要在提交页面时存储页面的“快照”以从中生成 PDF。
什么时候收到$("body").html()？
那么它应该给你更新值的标记。
它没有，因此我创建了这个问题.. 你试过了吗？

标签： jquery html

【解决方案1】：

您可以使用.attr() 函数。

例子：

$("input").each(function(){
    $(this).attr("value", $(this).val());
});

在此之后，您可以执行以下操作：

    $("body").html();

这应该可行。

【讨论】：

我需要一种方法来为表单上的“所有”输入元素执行此操作。
OP 必须通过所有输入并使用它来更改它们的值，但它应该可以工作。 +1
$("body").children().each(function() { $(this).attr("value", $(this).val());});
请注意this.value 会比$(this).val() 快
@Sarfraz 除非他在页面上有数百个输入，否则差异可能会不到一毫秒。

【解决方案2】：

$('[type=text], textarea').each(function(){ this.defaultValue = this.value; });
$('[type=checkbox], [type=radio]').each(function(){ this.defaultChecked = this.checked; });
$('select option').each(function(){ this.defaultSelected = this.selected; });

然后

$("body").html()

【讨论】：

接受的答案不适用于 textarea。但这个解决方案有效。
考虑到表单不只包含输入元素，这应该是公认的答案。

【解决方案3】：

$('input').each(function(){
  $(this).attr('data-value-input', $(this).val());
});

然后你可以得到你的html

var bodyHtml = $('body').html().toString().replace('data-value-input', 'value');

就是这样。

【讨论】：

如果页面加载时 HTML 中存在预设值怎么办？那么你会有 2 个值，对吧？
+1 让@Senad 抵消 -1，以获得正确的解决方案

【解决方案4】：

这是一种最简单的方法，即在输入上使用 live 函数。

$(document).ready(function() {

 var checker = false;
    $("input").live("change", function() {
        checker = (this.defaultValue !== this.value);
        if (checker)
            this.defaultValue = this.value;
    });
});

【讨论】：