添加 div javascript，然后就地编辑 jquery

Posted 2023-05-07

【中文标题】添加 div javascript，然后就地编辑 jquery

【英文标题】：Add div javascript and then edit in place jquery

【发布时间】：2016-08-14 16:50:48

【问题描述】：

我已使用来自 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>

【参考方案1】：

只需将 contenteditable="true" 添加到可编辑元素

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

【讨论】：

谢谢 :-) 你救了我从一个可编辑脚本跳转到另一个。

耶！当然你必须用 javascript 管理修改过的文本

嗯，我刚刚发现只要在html标签中使用contenteditable="true"就不需要额外的javasctripts了。

真的！ javascript可以用来保存编辑过的文字