时间戳

首页 > 解决方案 > HTML 未在 Jquery 选择器上更新

javascript - HTML 未在 Jquery 选择器上更新

问题描述

我正在尝试在单击时检索元素的 HTML。这是片段

$( () => {
  $( document ).on('click', 'button', function(){
    const html = $('table').html();
    console.log( html );
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Input 1</th>
      <th>Input 2</th>
      <th>Input 3</th>
      <th>Input 4</th>
      <th>Input 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
  </tbody>
</table>

<button>Clone table!</button>

如果我在每一行的输入元素上设置一个新值，我期望一个带有正确字符串的输入值属性的表格 HTML

我不知道为什么 DOM 没有更新，我在表格的 HTML 中添加了更改，看起来好像没有更改。我试图找到不同索引和函数的变化

$('table')[0].outerHTML
$('table')[0].innerHTML
$('table').clone().html()
$('table').html()

没有人拥有正确的 HTML。如果我浏览开发人员工具 -> 元素选项卡，我会看到更改，但无法检索它们。

你有什么建议？

标签： javascriptjqueryhtml

解决方案

见内联评论：

$( () => {
  $( document ).on('click', 'button', function(){
    // Set the value attribute in the HTML to the entered value
    $("input").attr("value", $("input").val());
    const html = $('div').html();
    console.log( html );
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text">
  <button>Save</button>
</div>

推荐阅读