拖动后无法单击的元素

Question

我的左侧有一些盒子。当它们被拖动时，它们会被克隆，因此您可以将任意数量的盒子放在想要的盒子上。

当它们被拖动到.sortable时，我希望通过单击链接的x来将它们删除。

<div class="draggable">
  <div class="structure">
    <div class="item1 e1" data-class="e1" data-parent="w1">New block <a href="javascript:;" class="remove">X</a></div>
    <div class="item1 e2" data-class="e2" data-parent="w2">New headline <a href="javascript:;" class="remove">X</a></div>
  </div>
</div>

<div class="sortable"></div>

这是我的脚本：

$(".sortable").sortable();

$(".structure .item1").draggable({
  connectToSortable: ".sortable",
  helper: "clone"
});

$(".remove").on("click", function () {
  alert("Hello out there!");
});

不幸的是，此x似乎无能为力。什么都没有发生。你知道我做错了什么吗？

在这里，您可以找到一个演示

Answer 1

$(function() {
  $(".sortable").sortable();

  $(".structure .item1").draggable({
    connectToSortable: ".sortable",
    helper: "clone"
  });

  $(document).on("click", ".remove", function() {
    if (confirm("Are you sure you want to remove this element?")) {
      $(this).parent().remove();
      $(".sortable").sortable("refresh");
    }
  });
});

.item1 {
  border: 1px solid #ccc;
  width: 150px;
  height: 50px;
  padding: 0.5em;
}

.sortable {
  border: 1px solid #222;
  padding: 3px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div class="draggable">
  <div class="structure">
    <div class="item1 e1" data-class="e1" data-parent="w1">New block <a href="javascript:;" class="remove">X</a></div>
    <div class="item1 e2" data-class="e2" data-parent="w2">New headline <a href="javascript:;" class="remove">X</a></div>
  </div>
</div>

<div class="sortable"></div>

这是使用更正的事件委托。

https://api.jquery.com/on/

提供选择器时，事件处理程序称为委派。当事件直接出现在绑定元素上时，而是针对匹配选择器的后代（内部元素）时，没有调用处理程序。 jQuery从事件目标到附加处理程序的元素（即，最内在到最外面的元素）将事件冒泡。