仅在 contenteditable div 中粘贴文本/纯文本，使用 js 添加答案

【问题标题】：Paste only text/plain in contenteditable div whitch was add with js仅在 contenteditable div 中粘贴文本/纯文本，使用 js 添加
【发布时间】：2015-04-05 14:50:11
【问题描述】：

你好

我有密码

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>

css

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);
    });
});

http://jsfiddle.net/HBEzc/478/

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

但它不适用于 contenteditable div whitch 是用 js 添加的。

如何让代码工作？

【问题讨论】：

标签： javascript jquery contenteditable

【解决方案1】：

您在页面加载时选择了 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);
    }); });

【讨论】：