Баг работы кастомного select

Есть кастомный select с функцией сортировки элементов списка, всё бы хорошо но после первого выбора элемента списка select перестаёт работать вовсе

https://codepen.io/fN9ne/pen/PompmLW

    <div class="wrapper">
        <div class="select">
            <div class="select__current"><li data-order="1">12 июля</li></div>
            <ul class="select__list">
                <li data-order="2">13 июля</li>
                <li data-order="3">14 июля</li>
                <li data-order="4">15 июля</li>
            </ul>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
.wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #131620;
}
.select {
    position: relative;
}
.select._active .select__current {
    border-radius: 23px 23px 0 0;
    border-bottom: 1px solid #919191;
    transition: .5s;
}
.select._active .select__list {
    opacity: 1;
    visibility: visible;
    transition: .5s .4s;
}
.select__current {
    background: #f1f1f1;
    color: #222;
    padding: 10px 30px;
    font-size: 24px;
    border-radius: 23px 23px 23px 23px;
    cursor: pointer;
    transition: .5s .4s;
}
.select__current:hover {
    background: #c4c4c4;
}
.select__current li {
    list-style: none;
}
.select__list {
    position: absolute;
    top: 100%;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    background: #f1f1f1;
    width: 100%;
    border-radius: 0 0 23px 23px;
    padding: 0 0 12px 0;
    overflow: hidden;
}
.select__list li {
    padding: 7px 30px;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #222;
    cursor: pointer;
    border-bottom: 1px solid #919191;
    transition: 0.5s;
}
.select__list li:hover {
    background: #d9d9d9;
}
$(document).ready(function() {
    $(document).on('click', function(e) {
        if (!e.target.closest('.select__current, .select__list')) $('.select').removeClass('_active');
    });

    $('.select__current').on('click', function() {
        $(this).closest('.select').toggleClass('_active');
    });

    $('.select__list li').on('click', function() {
        let list = $(this).closest('.select__list');
        let current = $(this).closest('.select').find('.select__current');
        list.append(current.find('li'));
        current.append($(this));
        ordering(list);
        $(this).closest('.select').removeClass('_active');
    });

    function ordering(list) {
        let listItems = list;
        let item;
        let itemNum;
        let arr = [];
        for (let i = 0; i < listItems.find('li').length; i++) {
            item = listItems.find('li').eq(i);
            arr.push(item);
        }
        let sorted = [...arr].sort(function(a, b) {
            return a.attr('data-order') - b.attr('data-order');
        });

        listItems.html('');

        for (let li of sorted) {
            listItems.append(li);
        }
    }
});

Ответы (1 шт):

Автор решения: Oliver Patterson

Проблема заключается в данном коде $('.select__current').on('click', он вешает обработчик события на все li которые ему известны. Но вы потом добавляете новые li и о них уже не известно. Когда вы делаете $('.select').on('click', '.select__list li', срабатывает делегирование, то есть событие срабатывает на всей области .select и проверяет, что клик был именно по нужному нам элементу.

$(document).ready(function() {
    $(document).on('click', function(e) {
        if (!e.target.closest('.select__current, .select__list')) $('.select').removeClass('_active');
    });

    $('.select').on('click', '.select__current', function() {
        $(this).closest('.select').toggleClass('_active');
    });

    $('.select').on('click', '.select__list li', function() {
        let list = $(this).closest('.select__list');
        let current = $(this).closest('.select').find('.select__current');
        list.append(current.find('li'));
        current.append($(this));
        ordering(list);
        $(this).closest('.select').removeClass('_active');
    });

    function ordering(list) {
        let listItems = list;
        let item;
        let itemNum;
        let arr = [];
        for (let i = 0; i < listItems.find('li').length; i++) {
            item = listItems.find('li').eq(i);
            arr.push(item);
        }
        let sorted = [...arr].sort(function(a, b) {
            return a.attr('data-order') - b.attr('data-order');
        });

        listItems.html('');

        for (let li of sorted) {
            listItems.append(li);
        }
    }
});
.wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #131620;
}
.select {
    position: relative;
}
.select._active .select__current {
    border-radius: 23px 23px 0 0;
    border-bottom: 1px solid #919191;
    transition: .5s;
}
.select._active .select__list {
    opacity: 1;
    visibility: visible;
    transition: .5s .4s;
}
.select__current {
    background: #f1f1f1;
    color: #222;
    padding: 10px 30px;
    font-size: 24px;
    border-radius: 23px 23px 23px 23px;
    cursor: pointer;
    transition: .5s .4s;
}
.select__current:hover {
    background: #c4c4c4;
}
.select__current li {
    list-style: none;
}
.select__list {
    position: absolute;
    top: 100%;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    background: #f1f1f1;
    width: 100%;
    border-radius: 0 0 23px 23px;
    padding: 0 0 12px 0;
    overflow: hidden;
}
.select__list li {
    padding: 7px 30px;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #222;
    cursor: pointer;
    border-bottom: 1px solid #919191;
    transition: 0.5s;
}
.select__list li:hover {
    background: #d9d9d9;
}
<div class="wrapper">
    <div class="select">
        <div class="select__current"><li data-order="1">12 июля</li></div>
        <ul class="select__list">
            <li data-order="2">13 июля</li>
            <li data-order="3">14 июля</li>
            <li data-order="4">15 июля</li>
        </ul>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

→ Ссылка