用js添加僅可粘貼的文本/純文本在可編輯的div鞭中

Question

你好

我有一個密碼

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

js

$(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中使用過去的文本/純文本。

但這與js添加的contenteditable div不兼容。

如何使代碼正常工作？

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