Заполнение в реальном времени входов после клонирования

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; 
     } 

Если добавить больше полей, мне нужно, чтобы это реплицировать для новой линии, как поле строки и ввода, с идентификатором:

control-II-Art-list-line2 

Есть ли еще способ, как сделать это? Пожалуйста, проверьте скрипку, и я думаю, вы получите то, что я имею в виду. Спасибо, совет.

Answer 1

Использование jQuery и делегирования событий было бы тривиально. Делегирование Приемники событий работает для элементов, добавляемых в будущем:

$('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/