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

使用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>