Add div javascript and then edit in place jquery

Question

I've used the code from Add/remove HTML inside div using JavaScript to make it suite my needs but unable to make any added <div> or <span> editable with any of the edit in place scripts that I found.

As you can see the last editable field is working fine but any new fields added with "+" is not working.

Any help will be appreciated.

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

albebonv · Accepted Answer · 2016-04-21 13:02:42Z

2

just add contenteditable="true" to the editable 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>

answered Apr 21, 2016 at 13:02

albebonv

812 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alex Over a year ago

Thanks :-) You've saved me jumping from one editable script to another.

albebonv Over a year ago

yw! of course you have to manage modified text with javascript

Alex Over a year ago

Hmm, I've just found that there is no requirement for extra javasctripts as long as I use contenteditable="true" in the html tag.

albebonv Over a year ago

true! javascript can be used to save the edited text

Collectives™ on Stack Overflow

Add div javascript and then edit in place jquery

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related