javascript - 克隆后实时填充输入

Question

我正在学习 JS，但陷入了困境。 http://jsfiddle.net/h7vgxewL/我想要实现的是能够更改克隆输入中的值。问题出在这里:

document.getElementById("control-II-Art-list-line1").onkeyup = function() {
        document.getElementById("display-II-Art-list-line1").innerHTML = this.value;   
        }

如果我添加更多字段，我需要为新行复制此字段，例如行和输入字段，其 ID 为:

control-II-Art-list-line2

有什么办法吗？请检查 fiddle ，我想你会明白我的意思。谢谢建议。

Answer 1

使用 jQuery 和事件委托(delegate)，这将是微不足道的。委托(delegate)事件监听器适用于将来添加的元素:

$('form').on('keyup', 'input', function(){
    $('#' + this.id.replace("control-", "display-")).html( this.value );
});

http://jsfiddle.net/h7vgxewL/3/

或者，在普通 JS 中:

document.forms[0].addEventListener('keyup', function(e){
   var targetid, targetElement;
   if(e.target.id){
        targetid = e.target.id.replace("control-", "display-");
        targetElement = document.getElementById( targetid );
        if( targetElement ){
            targetElement.innerHTML = e.target.value;
        } 
  }
});

http://jsfiddle.net/dd0w7skz/