Fügen Sie div Javascript und dann an der richtigen Stelle bearbeiten jquery

Question

Ich habe den Code von Add/remove HTML inside div using JavaScript verwendet, um es meine Bedürfnisse machen, aber keine <div> oder <span> editierbar mit einem der Edit in Place-Skripte, die ich gefunden habe.

Wie Sie sehen, das letzte bearbeitbare Feld funktioniert gut, aber alle neuen Felder mit "+" hinzugefügt funktioniert nicht.

Jede Hilfe wird geschätzt.

<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

fügen Sie einfach contenteditable = "true" an das bearbeitbare Element

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