时间戳

首页 > 解决方案 > 无法获取动态创建的输入字段的更改值

javascript - 无法获取动态创建的输入字段的更改值

问题描述

我的 HTML 中有一个按钮。如果我单击按钮，则会生成两个输入字段。我为输入字段设置了默认值。但我想改变价值。每当我更改任何值时，我都会尝试通过 jQuery 获取输入字段的更改值。但我无法访问它。我只得到event.target. 但我想要改变的价值。到目前为止，我尝试了以下方法。

<button type='button' id="add">click</button>

<div id='cloneDoc'></div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    $("div").change(function(event) {
      console.log(event.target);
    });
  });

  document.getElementById("add").addEventListener("click", function() {
    var htmlClone = '<input  type="number" name="a" value="50" /><br><input  type="number" name="b" value="46" /><br><br>'
    document.getElementById('cloneDoc').innerHTML += htmlClone;
  });
</script>

标签： javascriptjqueryhtml

解决方案

let obj = {a: 50, b: 46};
$(document).ready(function() {
  $("table").change(function(event) {
    obj[event.target.name] = event.target.value;
    $(event.target).attr("value", event.target.value);
  });
});

$("#add").click(function() {
  let htmlClone = `<input  type="number" name="a" value="${obj.a}" /><br><input  type="number" name="b" value="${obj.b}" /><br><br>`;
  debugger;
  document.getElementById('cloneDoc').innerHTML += htmlClone;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type='button' id="add">click</button>

<table id='cloneDoc'></table>

推荐阅读