时间戳

首页 > 解决方案 > element.onchange 不适用于元素列表

javascript - element.onchange 不适用于元素列表

问题描述

所以我有一个名为“Form”和“Question”的二类。“表格”包含一系列问题。当我在数组中添加一个问题时，我会在每个问题中调用一个名为 render() 的方法

    render() {
        let htmlElement = document.getElementById("formBody");

        let id = Question.GenerateID();
        htmlElement.innerHTML += `
                <div class="p-2">
                    <input type="text" class="input-transparent w-100" id="${id}.t" value="${this.Title}" placeholder="Unnamed question">
                </div>`;

        /**
         * @param {int} id
         */
        let questionNameChange = function(id) {
            this.Title = document.getElementById(id + ".t").value;
        };

        document.getElementById(id + ".t").onchange = questionNameChange.bind(this, id);
     }

表格图片

表格图片

问题是 element.onchange，它允许我更改问题的标题。

当我通过输入文本更改任何问题的标题时，它仅适用于已呈现的最后一个问题。

我做错什么了吗？

标签： javascriptevents

解决方案

也许你必须延迟绑定 onchange 直到元素被插入到 dom 中。换句话说，将它包装在一个 setTimeout 中：

  setTimeout(function() {
        document.getElementById(id + ".t").onchange = questionNameChange.bind(this, id);
  })

查看这个工作示例： 

let Question = {GenerateID: () => Math.floor(Math.random() * 100)}
class MyClass {
  constructor(){
    this.Title = 'my title'
  }
  
  questionNameChange(id) {
    this.Title = document.getElementById(id + ".t").value;
    document.getElementById(`${id}-label`).innerHTML = this.Title
  }

  render() {
        let htmlElement = document.getElementById("formBody");

        let id = Question.GenerateID();
        htmlElement.innerHTML += `
                <div class="p-2">
                    <input type="text" class="input-transparent w-100" id="${id}.t" value="${this.Title}" placeholder="Unnamed question">
                    <label id="${id}-label"></label>
                </div>`;

        setTimeout(() => {
          document.getElementById(id + ".t").onchange = () => {
            this.questionNameChange(id)
          }
        })
        
  }   
}

$(() => {     
  let myClass = new MyClass()
     myClass.render()
     myClass.render()
     myClass.render()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="formBody">

</form>

推荐阅读