剪切和粘贴不从 html 元素中获取所有属性/属性答案

【问题标题】：Cut and paste not grabbing all attributes/properties from html element剪切和粘贴不从 html 元素中获取所有属性/属性
【发布时间】：2018-08-27 00:42:48
【问题描述】：

我有一个动态添加到可竞争 div 的 div；添加的内容如下所示：

<div><a onclick='my_function()'>HELLO</a></div>

因此，当有人点击 HELLO 时，my_function 会调用。效果很好。

但我想允许用户从 contenteditable div 中剪切此元素并将其粘贴到其他位置。

剪切和粘贴在浏览器中按预期工作，所有格式保持一致。但是我丢失了元素内的 onclick 属性。所以当用户粘贴内容时，它看起来像这样：

<div><a>HELLO</a></div>

有没有办法剪切和粘贴内容，同时保留其 html 中的所有属性/属性？

我曾尝试使用 jQuery 来捕获剪切和粘贴事件，如下所示：

$(".editable_div").on('cut', function(event) {
     cut_content = event.currentTarget.innerHTML;
})

$(".editable_div").on('paste', function(event) {
     $(this).append(cut_content)
})

以及其他变体，确保“cut_content”在全球范围内可用。似乎没有任何效果。

【问题讨论】：

标签： javascript jquery html events

【解决方案1】：

你需要使用preventDefault()

演示：(ctrl + x)

function my_function(){
   console.log('foo');
}

//sample function to add dynamic div
function addDynamicDiv(){
$('#firstDiv').append("<div><a onclick=\'my_function()\'>HELLO</a></div>");
}

$(document).ready(function(){
var cut_content;

$(".editable_div").on('cut', function(event) {
     cut_content = event.currentTarget.innerHTML;
     })
$(".editable_div").on('paste', function(event) {
     event.preventDefault();
     $(this).html(cut_content);
     })
     
$(".editable_div").on('click', function(event) {
    document.execCommand('selectAll',false,null);
});

//execute adding of dynamic div when document is ready
addDynamicDiv();

});

.editable_div{
border: 1px solid black;
height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="firstDiv" class="editable_div" contenteditable="true"></div>
  
  <br><br>
  
  <div class="editable_div" contenteditable="true"></div>
</body>

【讨论】：

感谢您的回答。但这会将 div 内的所有内容替换为用户粘贴的任何内容。如果该 div 中有其他内容，我们不希望它被替换。 HELLO 元素的粘贴应独立于任何其他内容，并保留其属性。