Добавить div javascript, а затем отредактировать на месте jquery

Question

Я использовал код от Add/remove HTML inside div using JavaScript, чтобы сделать его набором моих потребностей, но не смог сделать никаких добавленных <div> или <span>, редактируемых с помощью любого редактируемого скрипта, который я нашел.

Как вы можете видеть, последнее редактируемое поле работает нормально, но любые новые поля, добавленные с помощью «+», не работают.

Любая помощь будет оценена по достоинству.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="http://wosephjeber.com/inputizer/dist/inputizer.js"></script> 
 
    
 
<script>function counter(){return($(".border").length);}</script> 
 
<input type="button" value="+" onclick="addRow()"> 
 
<div id="content"> 
 
</div> 
 
<span class="border">1</span> 
 
<span class="border">2</span> 
 
<span class="border">3</span> 
 
<span class="border">4</span> 
 

 

 
<script type="text/javascript"> 
 
function addRow() { 
 
    var count =$(".border").length+1; 
 
    var div = document.createElement('div'); 
 

 
    div.className = 'border'; 
 
    div.innerHTML = '<span class="icounter">'+ count +'</span> <span class="inputize-me">This is editable</span> <span id="Display" class="ir"></span>\ 
 
     <input type="button" value="-" onclick="removeRow(this)">'; 
 

 
    document.getElementById('content').appendChild(div); 
 
} 
 

 
function removeRow(input) { 
 
    document.getElementById('content').removeChild(input.parentNode); 
 
} 
 

 
</script> 
 
<br><br> 
 
<span class="inputize-me">This is editable</span> 
 
<script> 
 
     $('.inputize-me').inputizer(function(value) { 
 
     console.log(value); 
 
     }); 
 
    </script>

Answer 1

просто добавить contenteditable = "истина" в редактируемый элемент

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="http://wosephjeber.com/inputizer/dist/inputizer.js"></script> 
 
    
 
<script>function counter(){return($(".border").length);}</script> 
 
<input type="button" value="+" onclick="addRow()"> 
 
<div id="content"> 
 
</div> 
 
<span class="border">1</span> 
 
<span class="border">2</span> 
 
<span class="border">3</span> 
 
<span class="border">4</span> 
 

 

 
<script type="text/javascript"> 
 
function addRow() { 
 
    var count =$(".border").length+1; 
 
    var div = document.createElement('div'); 
 

 
    div.className = 'border'; 
 
    div.innerHTML = '<span class="icounter">'+ count +'</span> <span class="inputize-me" contenteditable="true">This is editable</span> <span id="Display" class="ir"></span>\ 
 
     <input type="button" value="-" onclick="removeRow(this)">'; 
 

 
    document.getElementById('content').appendChild(div); 
 
} 
 

 
function removeRow(input) { 
 
    document.getElementById('content').removeChild(input.parentNode); 
 
} 
 

 
</script> 
 
<br><br> 
 
<span class="inputize-me" contenteditable="true">This is editable</span> 
 
<script> 
 
     $('.inputize-me').inputizer(function(value) { 
 
     console.log(value); 
 
     }); 
 
    </script>