Javascript 仅在contenteditable div中粘贴文本/纯文本，该div是用js添加的

你好

我有密码

html

<div style="color:red">Some <em>rich</em> <span style="font-size:2em">HTML</span></div>
<div class='myDiv' contenteditable></div>
<button class="commButtonS">OPEN</button>

js

div[contenteditable] {
    height: 100px;
    border:1px solid black;
}

$(document).ready(function(){
    $(document).on('click', '.commButtonS', function(){
        $('.commButtonS').after("<div class='myDiv' contenteditable></div>");
    }); 
    document.querySelector(".myDiv").addEventListener("paste", function(e){
        e.preventDefault();
        var text = e.clipboardData.getData("text/plain");
        document.execCommand("insertHTML", false, text);
    });
});

$（文档）.ready（函数（）{
$（文档）.on（'click'，'commButtonS'，function（）{
$（'.commButtonS'）。在（“”）之后；
}); 
document.querySelector（“.myDiv”）.addEventListener（“粘贴”，函数（e）{
e、 预防默认值（）；
var text=e.clipboardData.getData（“text/plain”）；
document.execCommand（“insertHTML”，false，text）；
});
});

它只允许contenteditable div中的过去文本/纯文本

但它不适用于contenteditable div，因为它是用js添加的

---

如何使代码工作？

页面加载时选择的是myDiv，因此事件仅应用于第一个div。您需要使用事件委派。您的代码如下所示：

$(document).ready(function(){
    $(document).on('click', '.commButtonS', function(){
        $('.commButtonS').after("<div class='myDiv' contenteditable></div>");
    }); 
    $(document).on("paste", ".myDiv", function(e){
        e.preventDefault();
        var text = e.originalEvent.clipboardData.getData("text/plain");
        document.execCommand("insertHTML", false, text);
    }); });

$（文档）.ready（函数（）{
$（文档）.on（'click'，'commButtonS'，function（）{
$（'.commButtonS'）。在（“”）之后；
}); 
$（文档）.on（“粘贴”，“.myDiv”，函数（e）{
e、 预防默认值（）；
var text=e.originalEvent.clipboardData.getData（“text/plain”）；
document.execCommand（“insertHTML”，false，text）；
}); });