Как сделать элемент Clickable внутри перемещаемого элемента?

Question

Я работаю над Drag & Drop Builder с использованием JQuery UI. То, что я хочу сделать, - это когда я наводил на любой элемент Drag-able, появляется крест и при нажатии этого креста этот элемент нужно удалить. Вот мой JQuery код для создания Drag-возможности элемента:

var postfix = '<i class="fa fa-times"></i>'; 
$(".buildbutton").click(function() { 
    var id = this.id; 
    if (id === 'label') { 
     var elemHtml = '<div class="draggable"><label contenteditable="true" class="draggable" id="label' + labelCount + '">Text</label> ' + postfix + '</div>'; 
     $("#canvas").append(elemHtml); 
     label++; 
    } 
    $(function() { 
     $(".draggable").draggable({containment: "#canvas"}).resizable(); 
    }); 
    return false; 
}); 

JQuery код для привязки Удалить событие:

$(".draggable").on("click", "i", function(){ 
    alert("going to remove this element"); 
}); 

Но Click событие не работает как перетащить в состоянии элемент вызывая его собственное событие всякий раз, когда я нажимаю на него.

Как я могу сделать этот клик по клику?

Answer 1

вы получили тот же вопрос, как здесь: jQuery .on('click') does not work with jQuery UI draggable

Это должно работать:

$(".draggable i").on("click", function(){ 
    alert("going to remove this element"); 
}); 

Вот рабочая jsFiddle

Answer 2

Это рабочий код:

$(".draggable i.remove-elem").off('click').on("click", function(){ 
     $(this).parent('.draggable').remove(); 
});