jQuery UI Draggable Clone

Question

I have a list of items that are draggable onto some boxes. I have added a close button to the list items. The close button works on the original list item but not on the clones.

$(".sortable").sortable({
    revert: true,
    connectWith: ".draggable"
});
$(".draggable").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "true",
    placeholder: "droppable-placeholder"
});
$(".sortable").draggable({
    connectWith: ".draggable"
});

$("ul, li").disableSelection();
$(".close-list-item").click(function(event) {
    event.preventDefault();
    console.log("close list item called");
    $(this).closest('li').remove();
});

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0.7em;
    float: left;
}

li {
    margin: 0.5em;
    padding: 0.5em;
    width: 200px;
    border: 1px solid black;
}

.draggable-column {
    height: 100%;
}

.droppable-item {
    border: 1px solid black;
    padding: 0.5em;
    float: left;
    align-content: space-between;
}

.sortable {
    width: 230px;
    height: 10em;
    overflow: auto;
    border: 1px solid black;
    background-color: lightgrey;
}

.droppable-placeholder {
    background-color: yellow;
}

.row {
    display: flex;
    /* equal height of the children*/
}

.col {
    flex: 1;
    /* additionally, equal width */
    padding: 1em;
    border: solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="row">
    <div class="col-xs-4 draggable-column">
        <ul class="">
            <li class="draggable ">1 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">2 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">3 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">4 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">5 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="col-xs-8 droppable-column">

        <div class="droppable-item">
            <h3>
              Item 1
            </h3>
            <ul class="sortable">

            </ul>
        </div>
        <div class="droppable-item">
            <h3 class=" text-center">
              Item 2
            </h3>
            <ul class="sortable ">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 3
            </h3>
            <ul class="sortable">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 4
            </h3>
            <ul class="sortable ">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 5
            </h3>
            <ul class="sortable ">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 6
            </h3>
            <ul class="sortable ">

            </ul>
        </div>
    </div>

</div>

When the items are dragged into a box, a clone is created, The close button the clone does not close as expected. How do I get the clones close buttons working?

Answer 1

Since the dropped li element (and the close button inside it) is dynamically generated, you need to use the below syntax to bind events to it. The syntax you used won't bind events to dynamically created elements. Reference: Event binding on dynamically created elements?.

$(".sortable").sortable({
    revert: true,
    connectWith: ".draggable"
});
$(".draggable").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "true",
    placeholder: "droppable-placeholder"
});
$(".sortable").draggable({
    connectWith: ".draggable"
});

$("ul, li").disableSelection();
// See change in the below line
$(".draggable-column, .droppable-column").on("click", ".close-list-item", function(event) {
    event.preventDefault();
    console.log("close list item called");
    $(this).closest('li').remove();
});

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0.7em;
    float: left;
}

li {
    margin: 0.5em;
    padding: 0.5em;
    width: 200px;
    border: 1px solid black;
}

.draggable-column {
    height: 100%;
}

.droppable-item {
    border: 1px solid black;
    padding: 0.5em;
    float: left;
    align-content: space-between;
}

.sortable {
    width: 230px;
    height: 10em;
    overflow: auto;
    border: 1px solid black;
    background-color: lightgrey;
}

.droppable-placeholder {
    background-color: yellow;
}

.row {
    display: flex;
    /* equal height of the children*/
}

.col {
    flex: 1;
    /* additionally, equal width */
    padding: 1em;
    border: solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="row">
    <div class="col-xs-4 draggable-column">
        <ul class="">
            <li class="draggable ">1 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">2 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">3 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">4 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">5 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="col-xs-8 droppable-column">

        <div class="droppable-item">
            <h3>
              Item 1
            </h3>
            <ul class="sortable">

            </ul>
        </div>
        <div class="droppable-item">
            <h3 class=" text-center">
              Item 2
            </h3>
            <ul class="sortable ">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 3
            </h3>
            <ul class="sortable">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 4
            </h3>
            <ul class="sortable ">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 5
            </h3>
            <ul class="sortable ">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 6
            </h3>
            <ul class="sortable ">

            </ul>
        </div>
    </div>

</div>