只粘贴文本/在CONTENTEDITABLE格whitch纯用JS加

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