javascript - 如何使可拖动元素内的元素可点击？

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;
});

绑定(bind)删除事件的 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();
});