Почему не работает сортировка по цене?

Question

[kikosko]

В методе sortProductsByPrice (sortOrder) сортировка не работает, когда я удаляю или добавляю продукты в dom при помощи слушателей(buttAdd.addEventListener,buttDelete.addEventListener), сортировка работает только для продуктов, находящихся в массиве this.products по умолчанию. То есть, сначала когда загрузилась таблица с дефолтными товарами, то при клике по ячейке "Price :" они сортируются в порядке возрастания, а после того как удаляю или добавляю новый товар, сортировка уже не работает.

Я понимаю что в методе "show()" перерисовывается таблица и слушатели не попадают уже на новые элементы. Тогда, я пробовал переместить всех слушателей с их переменными в метод show() (как я пониманию, это так же правильно по построению кода), но после этого, когда срабатывает buttAdd.addEventListener добавляется продукт, при следующем добавлении то количество, которое уже было добавлено и +1 (видно при втором добавлении и так дальше), а фильтр по цене, вообще перестал работать : ). Поэтому я вынес слушателей с их переменными из метода "show()"

Продукты сортируются, при клике на Price: th>

Помогите пожалуйста JsFiddle

Answer 1

[Andrey Perov]

у вас обработчик отрабатывает только 1 раз

document.addEventListener("click", (e) => {
    // Используйте e.target 
    shop.sortProductsByPrice(Product.SORT_ORDER_ASC);
    shop.show();
}, false);

Если e.target === (вашей ячейки) то перерисовывать таблицу и делать сортировку, дальше думаю разберетесь

Comments

[kikosko]

Попробовал Ваш вариант и и сортировка происходит сразу, после удаления/добавления, а нужно, что бы был рабочий обработчик по Price: то есть при клике сортировать как до, так и после удаления/добавления товаров, а не при удалении/добавлении

[Andrey Perov]

kikosko, вы условие напишите, что если обработчик ( на что выкликнули ) т.е event.target равно вашему Price: то тогда выполнять ваши два метода show и sort

[kikosko]

Если я правильно понимаю, то он не работает
document.addEventListener("click", (e) => {
if (e.target === priceFilter) {
shop.sortProductsByPrice(Product.SORT_ORDER_ASC);
shop.show();
}
}, false);

[Andrey Perov]

kikosko, сравните правильно, посмотрите что вы сравниваете, в условие просто определите на тот ли элемент кинули, загуглите как это сделать

if(e.target.id === 'filter') ///...

[Andrey Perov]

document.addEventListener("click", (e) => {
   if(e.target.id === 'filter') {
      shop.sortProductsByPrice(Product.SORT_ORDER_ASC);
      shop.show();
   }
}, false);

kikosko, могли и сами бы разобраться...

[kikosko]

Как раз получилось, я искал по переменной :)

Answer 2

[Анатолий Медведев]

Когда вы делаете show() вы убиваете priceFilter вместе с его подпиской на событие. Нужно заново подписаться ну или не убивать его.

Comments

[kikosko]

если не буду делать show(), то продукты не будут добавляться/удаляться и если добавлю подписку shop.sortProductsByPrice(Product.SORT_ORDER_ASC); то сортировка произойдет автоматически например при добавлении товара, а нужно что бы был рабочий клик по Price: , до и после добавления/удаления товаров

[Andrey Perov]

kikosko, вам написал как подписаться на событие

[Анатолий Медведев]

kikosko, вам ничего не мешало сделать так что бы фильтр не умирал.