Element not clickable after dragging

Question

I got some boxes on the left that are draggable. When they are dragged, they are cloned, so you can put as many boxes as you want.

When they are dragged to the .sortable I want them to be removed by clicking on the x of a link.

<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>

This is my Script:

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

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

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

Unfortunately this x doesn't seem to do anything. Nothing happens. Do you have an idea what I'm doing wrong?

Here you find a demo https://codepen.io/alphafrau/pen/WNMJpow

You need to read up on Event Delegation. You have to do `$(document).on("click",".remove", function () {` — Carsten Løvbo Andersen, Jun 01 '22 at 13:06
Does this answer your question? [What is DOM Event delegation?](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) — Lapskaus, Jun 01 '22 at 13:48

score 1 · Accepted Answer · answered Jun 01 '22 at 15:43

$(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>

This is using the corrected event delegation.

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

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

Element not clickable after dragging

1 Answers1