javascript - jQuery val() 不更新 .html() 中的值

Question

我生成了一个 HTML 页面，其中包含输入字段的一些默认值。这是 HTML 和 JavaScript:

$('#trigger').click(function () {
            var content = $(this).parent().find('.content');
            content.find('#name').val("Young man");
            content.find('#age').val("25");

            alert(content.find('#name').val());
            alert(content.html());
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
        <a id="trigger" href="#">Know!</a>
        <div class="content">
            <div>
                <label>Name:</label>
                <input type="text" id="name" value="dummy">
            </div>
            <div>
                <label>Age:</label>
                <input type="text" id="age" value="dummy">
            </div>
        </div>
    </div>

我正在尝试将 div 分配给一个变量，然后通过此句柄更改 name 和 age 的值。第一个警报方法确认它们已更改。但是为什么content.html()还是输出原来的html呢？如何让 html() 输出更新后的数据？

Answer 1

jQuery .val() 方法从不更新 value 属性。您可以使用 .attr() 方法更改它。

$('#trigger').click(function() {
  var content = $(this).parent().find('.content');
  content.find('#name').attr("value", "Young man");
  content.find('#age').attr("value", "25");

  alert(content.find('#name').val());
  alert(content.html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <a id="trigger" href="#">Know!</a>
  <div class="content">
    <div>
      <label>Name:</label>
      <input type="text" id="name" value="dummy">
    </div>
    <div>
      <label>Age:</label>
      <input type="text" id="age" value="dummy">
    </div>
  </div>
</div>