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>

我试图让分配给一个变量的股利，然后通过这个手柄改变name和age值。第一种警报方法确认它们已更改。但为什么content.html()仍然输出原始的html？我怎样才能让html()输出更新的数据？

Answer 1

使用attr()指定新值。

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

 
      console.log(content.find('#name').val()); 
 
      console.log(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>

Answer 2

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>