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

Question

我有一个与我的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：

$(document).on('click', '.editor *', function(event) {  
     $(this).resizable(); 
     $(this).draggable({ handle: ".editor-move" }); 
     $(this).one($(this).append("<i class='icon-move editor-move'></i>")); 
     return false; 
    }); 

Answer 1

首先，你需要确保的当前目标该事件不是图标移动e lement，如果是的话退出。

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

其次，检查图标是否已被添加到随后的点击，以避免为同一元素添加多个图标。

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

JSFiddle

Answer 2

$(document).on('click', '.editor *', function(event) { 
     event.stopPropagation();  
     $(this).resizable(); 
     $(this).draggable({ handle: ".editor-move" }); 
     $(this).one($(this).append("<i class='icon-move editor-move'></i>")); 
     return false; 
    }); 

Answer 3

尝试

$(document).one('click', '.editor *', function(event) {  
    $(this).resizable(); 
    $(this).draggable({ handle: ".editor-move" }); 
    $(this).append("<i class='icon-move editor-move'></i>"); 
    return false; 
});