如何在可拖動元素內使元素可點擊？

Question

我正在使用 JQuery UI 開發拖放構建器。 我想要做的是，當我將鼠標懸停在任何可拖動元素上時，會出現一個十字，單擊該十字時，需要刪除該元素。 這是我創建可拖動元素的 JQuery 代碼：

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

這是工作代碼：

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

Answer 2

您遇到了與此處相同的問題： jQuery .on('click') 不適用於 jQuery UI 可拖動

這應該有效：

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

這是一個有效的jsFiddle