Question

我有一个包含父元素的简单类，并且我存储了它的子元素进度，但是当我添加到子元素时没有任何反应

class MyClass {
  constructor(element) {
    this.elem = element;
    this.child = this.elem('.child');
    this.fill();
  }
  fill() {
    this.elem.innerHTML += '<span class="child2"></span>';
  }
  update(val) {
    this.child.style.width = val + '%';
  }
}

当我调用更新功能时，没有任何反应。如果我打印子元素，我发现它的样式为val%，但我没有看到它＆＃34;更新＆＃34;在DOM中。

它就像复制对象而不存储引用一样。

顺便说一句： 这也适用this.elem.querySelector('.child').style.width = val + '%';

同时尝试children[0]也不会工作。

提前谢谢！

Answer 1

一个简单的实用程序，可将标记转换为documentFragment以便推送。

var dummy = document.createElement('div');
function fromHTML(markup){
    dummy.innerHTML = markup;
    for(var frag = document.createDocumentFragment(), fc; fc = dummy.firstChild;)
        frag.appendChild(fc);
    return frag;
}

所以不要node.innerHTML += someMarkup;更好地node.appendChild( fromHTML(someMarkup) )

在你的情况下

fill() {
    this.elem.appendChild( fromHTML('<span class="child2"></span>') );
}

或在这种简单的情况下，完全避免使用标记：

fill() {
    var child = document.createElement('span');
    child.className = "child2"; //avoid enumerated classes/valriables/everything
    this.elem.appendChild( child );
}

Answer 2

正如评论者所说，这很可能与在父节点或节点本身上使用.innerHTML有关。这背后的原因是当你使用.innerHTML时，JavaScript会修改DOM并在节点innerHTML中“重建”它。这将释放现有节点的所有现有句柄。这意味着当您更新innerHTML时，所有侦听器和引用都将丢失。

考虑增加而不是编辑innerHTML，这将解决您的问题。

未引用DOM对象

2 个答案: