如何使可拖动元素内的元素可点击？答案

【问题标题】：How to make an Element Clickable inside a Draggable Element?如何使可拖动元素内的元素可点击？
【发布时间】：2016-05-13 20:51:13
【问题描述】：

我正在使用 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 代码绑定一个 Remove 事件：

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

但是 Click 事件不起作用，因为每当我点击它时，可拖动元素都会触发它自己的事件。

我怎样才能使这个交叉点击能够。？

【问题讨论】：

我确信有一个更简单的方法，但我的第一个想法是：在对象的drop 上（基本上是当你放开鼠标时）找出它是否已经移动（获取以前的坐标，获取新坐标）。如果它没有移动，请将其移除

标签： javascript jquery jquery-ui draggable

【解决方案1】：

这是工作代码：

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

【讨论】：

【解决方案2】：

您遇到了与此处相同的问题：jQuery .on('click') does not work with jQuery UI draggable

这应该可行：

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

这是一个有效的jsFiddle

【讨论】：

这不起作用。实际上，您添加的示例链接是关于使可拖动元素的父元素可点击。但在我的情况下，我想让子元素可点击。
@user3130733 好的。我为你创建了一个Fiddle。看看这个。它有效。
成功了，谢谢。请添加一个答案，以便我接受。