Question

我是js的新手，我正在动态添加新的输入，我想从该输入中获取价值。如何为其添加事件侦听器？

  addNewInput(i) {
    const input = document.getElementsByClassName("scenario-inputs")
    let newInput = document.createElement("input")
    newInput.className = "dynamicInput"
    input[i].appendChild(newInput)
  }

Answer 1

您会回答自己的问题，每次添加新输入时，只需add a new event listener。

addNewInput(i) {
  const input = document.getElementsByClassName("scenario-inputs")
  let newInput = document.createElement("input")
  newInput.className = "dynamicInput"
  input[i].appendChild(newInput)
  newInput.addEventListener("keydown", function() {
      // do something ...
  }
}

Answer 2

如果您使用的是<dependency> <groupId>io.ciutat</groupId> <artifactId>ciutat-api</artifactId> <version>0.0.1-SNAPSHOT</version> <scope>system</scope> <systemPath>/Users/peris/Development/J2EE/eclipse-workspace/ciutat/target/ciutat-api-0.0.1-SNAPSHOT.jar</systemPath> </dependency>，那么这是动态添加元素的一种不好的方法。您可以维护一个数组，其中包含每个输入元素的信息，并且在{eclispe-workspace}上，只需将一个新条目推入该数组并做出反应即可为您呈现它。

Answer 3

addNewInput(i) {
  const input = document.getElementsByClassName("scenario-inputs")
  let newInput = document.createElement("input")
  newInput.className = "dynamicInput"
  input[i].appendChild(newInput)
  newInput.onchange = function () {to be implemented.}
}

绑定一个监听器就足够了。每当输入发生更改时，将调用您的函数，以便您可以读取输入的值。

如何从动态添加的输入中获取价值？

3 个答案: