Баг работы кастомного 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>