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中过去text / plain。

但它与使用js添加的满足的div whitch一起工作。

如何使代码有效？

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

仅在使用js添加的contenteditable div whitch中粘贴text / plain

1 个答案: