更改输入文件的值（不工作）

Question

如果用户单击按钮，我有一个小脚本会创建一个新的 div 块。要计算创建了多少，我有一个隐藏的输入。每次创建新块时，此隐藏输入的值都应更新。

这是我的脚本：

$(function () {
    $("#addBtn3").on("click", function () {
        imageBlockCount++;
        document.getElementById("counter").value = imageBlockCount;

        $(
            $.parseHTML(
                `<div class="form-group" id="gallery-${imageBlockCount}" >
                <label for="new-content-${imageBlockCount}">New Content</label>
                    <input type="text" name="content-${imageBlockCount}" class="form-control" id="new-content-${imageBlockCount} test-${imageBlockCount}" placeholder="new content" required>
            </div>`
            )
        ).appendTo("#newElements");
    });
});

这是我的html代码：

<div style="flex:auto;text-align:right;">
    <button id="addBtn3" type="button">Content +</button> 
</div>

<input name="counter" type="text" id="counter" value="0" hidden>

<div id="newElements">
</div>

但是在应该更新值的脚本中不起作用，但我不知道为什么，我没有找到任何其他如此不同的方法。

Answer 1

您的代码运行良好。将console.log($("#counter").val()) 放在appendTo 之后。

当输入字段的值发生变化时，网页的 HTML 不会自动更新。

如果你想要这样的功能，你可以在更新#counter的值之后放置：

$('#counter').attr('value', $('#counter').val());

$(function () {
  let imageBlockCount = 0
  $("#addBtn3").on("click", function () {
    imageBlockCount++;
    document.getElementById("counter").value = imageBlockCount;
    $('#counter').attr('value', $('#counter').val());
    $(
      $.parseHTML(
        `<div class="form-group" id="gallery-${imageBlockCount}"               <label for="new-content-${imageBlockCount}">New Content</label>
          <input type="text" name="content-${imageBlockCount}" class="form-control" id="new-content-${imageBlockCount} test-${imageBlockCount}" placeholder="new content" required>
        </div>`
      )
    ).appendTo("#newElements");
    console.log($('#counter').val())
  });
});

<div style="flex:auto;text-align:right;">
  <button id="addBtn3" type="button">Content +</button> 
</div>
  
<input name="counter" type="text" id="counter" value="0" hidden>
  
<div id="newElements">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>