Не выполняется скролл при динамической вставке элементов
Приложенный ниже скрипт выполняет следующее:
При нажатии радио "О", "E", "B", "R" происходит фильтрация по первой букве второго слова. После того, как мы фильтруем, при нажатии на отфильтрованный чекбокс необходимо, чтобы выполнялся скролл к надписи "Контент", но этого не происходит. Подозреваю, что это из-за динамической фильтрации. Прошу помощи.
document.querySelectorAll("input[type='radio']").forEach(el => el.checked=false);
let letters = [];
const itemList = [];
document.querySelectorAll('.productdetails li').forEach((el, i) => {
const letter = el.innerText.trim().split(' ')[1][0];
letters.push(letter);
letters = [...new Set(letters)];
itemList.push({
id: i,
content: el.innerHTML,
letter
});
const lettersMap = letters.map(el => {
return `<label class="example-lk"><input class="downers form-check-input" name="b" type="radio" value=${el} autocomplete="off">${el}</label>`
});
document.querySelector('.results .tabs').innerHTML = lettersMap.join('')
});
document.querySelectorAll('.tabs input').forEach(tab => {
tab.onclick = (e) => {
if(tab.name!=="b") return;
const FilteredList = itemList.filter(item => item.letter === e.target.value).map(item => `<li>${item.content}</li>`);
document.querySelector('.results .content').innerHTML = FilteredList
e.target.closest(".results").querySelector(".content").classList.add("show");
const pd = document.querySelector(".productdetails")
if (pd) {
pd.remove()
}
}
});
(() => {
const handler = evt => {
if (evt.target.checked)
tabs.scrollIntoView({ block: 'start', behavior: 'smooth' });
};
const tabs = document.querySelector('.row');
for (let cbox of document.querySelectorAll('.wannaup'))
cbox.addEventListener('change', handler);
})();.tabs {
border: 1px solid black;
padding: 10px;
width: 300px;
display: flex;
justify-content: space-between;
}<div class="row">КОНТЕНТ</div>
<div class="results">
<ul class="tabs">
<li>
<label class="example-lk">
<input class="downers form-check-input" name="b" type="radio" value="3" autocomplete="off">3</label>
</li>
</ul>
<ul class="content"></ul>
</div>
<ul class="vmproduct productdetails">
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-omonefivezerotwonh.html" title="3Q OM1502NH"><img src="/images/virtuemart/product/resized//resized/3q-om1502nh_0x90.jpg" alt="/resized/3q-om1502nh" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-omonefivezerotwonh.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q OM1502NH</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-esonethreezerosixn.html" title="3Q ES1306N"><img src="/images/virtuemart/product/resized//resized/3q-es1306n_0x90.jpg" alt="/resized/3q-es1306n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-esonethreezerosixn.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q ES1306N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-ogonefivezerothreenh.html" title="3Q OG1503NH"><img src="/images/virtuemart/product/resized//resized/3q-og1503nh_0x90.jpg" alt="/resized/3q-og1503nh" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-ogonefivezerothreenh.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q OG1503NH</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-esoneonezerofiven.html" title="3Q ES1105N"><img src="/images/virtuemart/product/resized//resized/3q-es1105n_0x90.jpg" alt="/resized/3q-es1105n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-esoneonezerofiven.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q ES1105N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-esonezerozeroonen.html" title="3Q ES1001N"><img src="/images/virtuemart/product/resized//resized/3q-es1001n_0x90.jpg" alt="/resized/3q-es1001n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-esonezerozeroonen.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q ES1001N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-esonefourzerosixn.html" title="3Q ES1406N"><img src="/images/virtuemart/product/resized//resized/3q-es1406n_0x90.jpg" alt="/resized/3q-es1406n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-esonefourzerosixn.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q ES1406N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-elonezerozerofourn.html" title="3Q EL1004N"><img src="/images/virtuemart/product/resized//resized/3q-el1004n_0x90.jpg" alt="/resized/3q-el1004n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-elonezerozerofourn.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q EL1004N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-omonefivezerotwonh.html" title="3Q OM1502NH"><img src="/images/virtuemart/product/resized//resized/3q-om1502nh_0x90.jpg" alt="/resized/3q-om1502nh" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-omonefivezerotwonh.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q OM1502NH</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-esonezerozeroonenn.html" title="3Q ES1001NN"><img src="/images/virtuemart/product/resized//resized/3q-es1001nn_0x90.jpg" alt="/resized/3q-es1001nn" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-esonezerozeroonenn.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q ES1001NN</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-oeonefivezeroonenh.html" title="3Q OE1501NH"><img src="/images/virtuemart/product/resized//resized/3q-oe1501nh_0x90.jpg" alt="/resized/3q-oe1501nh" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-oeonefivezeroonenh.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q OE1501NH</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-ononefourzerothreen.html" title="3Q ON1403N"><img src="/images/virtuemart/product/resized//resized/3q-on1403n_0x90.jpg" alt="/resized/3q-on1403n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-ononefourzerothreen.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q ON1403N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-eneightninezeroonen.html" title="3Q EN8901N"><img src="/images/virtuemart/product/resized//resized/3q-en8901n_0x90.jpg" alt="/resized/3q-en8901n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-eneightninezeroonen.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q EN8901N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-bnonethreezerotwon.html" title="3Q BN1302N"><img src="/images/virtuemart/product/resized//resized/3q-bn1302n_0x90.jpg" alt="/resized/3q-bn1302n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-bnonethreezerotwon.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q BN1302N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-rsonezerozeroonet.html" title="3Q RS1001T"><img src="/images/virtuemart/product/resized//resized/3q-rs1001t_0x90.jpg" alt="/resized/3q-rs1001t" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-rsonezerozeroonet.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q RS1001T</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-ogonefivezerothreenh.html" title="3Q OG1503NH"><img src="/images/virtuemart/product/resized//resized/3q-og1503nh_0x90.jpg" alt="/resized/3q-og1503nh" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-ogonefivezerothreenh.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q OG1503NH</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-rsonezerozeroonetn.html" title="3Q RS1001TN"><img src="/images/virtuemart/product/resized//resized/3q-rs1001tn_0x90.jpg" alt="/resized/3q-rs1001tn" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-rsonezerozeroonetn.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q RS1001TN</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-euonezerozerofiven.html" title="3Q EU1005N"><img src="/images/virtuemart/product/resized//resized/3q-eu1005n_0x90.jpg" alt="/resized/3q-eu1005n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-euonezerozerofiven.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q EU1005N</h3>
</li>
</ul>Ответы (1 шт):
Автор решения: Егор Банин
→ Ссылка
Обработчики события в js связаны с объектами элементов, на которые они повешены. Когда вы вешаете обработчик, то это изменяет состояние именно того, объекта, на который вы его повесили. Если вы удаляете элемент, то вместе с ним удаляется и его обработчик. Новые элементы, добавленные в dom после того как вы уже повесили обработчики на change, не будут вызывать скрол. Они новые, на них обработчик не повешен!
Выхода из ситуации два.
- Каждый раз, кода добавляете новые элементы на страницу, вешать на них обработчик.
- Повесить обработчик на общего родителя, воспользовавшись тем, что события всплывают.
Второй вариант мне кажется более элегантным.
document.querySelector('.content').addEventListener('change', handler);