Javascript 只追加一次UI元素，避免事件传播

我的ui元素（图标）有一个问题，它是draggable（）函数的保持器。图标应仅在单击时附加一次。我的代码的问题是，当我点击图标时，它会再次运行代码并附加下一个图标

如何避免这种情况下的事件传播。这里有更好的方法使用one（）函数吗。 我的代码：

HTML结构：

<div class="editor">
  <h1>Title</h2>
  <p>paragraph</p>
  <img src="">
</div>

<div class="editor">
  <h1>Title</h2>
  <p>paragraph</p>
  <img src="">
</div>


<div class="editor">
  <h1>Title</h2>
  <p>paragraph</p>
  <img src="">
</div>

标题
段落

标题
段落

标题
段落

JS:

$（文档）。在（'click'，'.editor*'上，函数（事件）{
$（this.resizeable（）；
$（this.draggable（{handle:“.editor move”}）；
$（this）.one（$（this）.append（“”）；
返回false；
});

$（文档）。在（'click'，'.editor*'上，函数（事件）{
event.stopPropagation（）；
$（this.resizeable（）；
$（this.draggable（{handle:“.editor move”}）；
$（this）.one（$（this）.append（“”）；
返回false；
});

试试看

$（文档）.one（'click'，'.editor*'，函数（事件）{
$（this.resizeable（）；
$（this.draggable（{handle:“.editor move”}）；
$（此）。追加（“”）；
返回false；
});

首先，您需要确保事件的当前目标不是图标移动元素，如果是，则退出

if ($(event.target).hasClass("icon-move"))
    return false;

其次，检查图标是否已在后续单击中添加，以避免为同一元素添加多个图标

if($(".icon-move",this).length==0)
    $(this).append("<i class='icon-move editor-move'></i>");

if（$（“.icon move”，this）.length==0）
$（此）。追加（“”）；

---

此代码仅适用于第一个编辑器，在函数运行一次后，我们无法在下一个编辑器上重复此操作。@lipenco是否创建元素dynamically@lipenco还有

编辑器中的元素是否可独立拖动和调整大小是，编辑器中的元素可以拖动并调整大小independently@lipenco另外，为什么单击事件中启用了可拖动和可调整大小的功能不在页面加载中不幸的是，这不起作用，它也在创建错误：未捕获类型错误：对象函数对象（）{[本机代码]}没有方法“推送”
$(document).one('click', '.editor *', function(event) {      
    $(this).resizable();
    $(this).draggable({ handle: ".editor-move" }); 
    $(this).append("<i class='icon-move editor-move'></i>"); 
    return false;
});

if ($(event.target).hasClass("icon-move"))
    return false;

if($(".icon-move",this).length==0)
    $(this).append("<i class='icon-move editor-move'></i>");