Mam prośbę w rozwiązaniu problemu powielania treści przez JS

Problem pojawia się gdy w kodzie HTML pojawia się więcej niż 1 pozycja.
Każda kolejna zwiększa powieloną treść.

Np. dodamy 3 pozycję, a potem zmienimy wartość w pierwszej 3 razy, to będzie coś takiego:


Ogólnie jest logiczne bo mam taki fragment kodu:

[JAVASCRIPT] pobierz, plaintext 
 $('select.wyborPozycji').on('change', function() { /*...*/ });
[JAVASCRIPT] pobierz, plaintext 

Jednakże potrzebuję pomoc, aby móc wyłuskać tylko tą pozycję która w danej chwili zmienia swoją wartość.

https://jsfiddle.net/tomplus/o6b6p4dx/5/

Ogólnie mógłbym zostawić, bo to więklszego problemu nie robi gdy użyje funkcji .html(), ale w przypadku stosowania .append() będzie pojawiać się nieproszona treść.

Na przycisk dodający pozycję podłączasz znów zdarzenia do wszystkich selectów.

1. Albo użyj delegacji zdarzeń przy selectach (wtedy nie dodawaj zdarzenia change w środku obsługi zdarzenia click przycisku)
2. Albo zapisuj sobie w danym select, że właśnie dodałeś do niego zdarzenie. Dodawanie zdarzenia change musiałbyś wtedy zrobić w pętli i sprawdzić czy select w danej iteracji miał już dodane zdarzenie.
3. Albo przy dodawaniu zdarzenia dodaj do niego klasę, a selektor select.wyborPozycji zmień na select.wyborPozycji:not(.klasa).

Szczerze mówiąc, nie rozumiem, szczególnie punktu 1.

Aktualnie każdy SELECT ma dwie unikalne atrybuty: name=wybor[%s] oraz data-pozycja-id=%s

Dlatego rozwiązaniem logicznym jak dla mnie byłoby znalezienie wartosci z atrybutu data-id-pozycji, w tagu nadrzędnym^2 i znajduję, dzięki: var idp = $(this).parent().parent().data('idPozycji'); ale gdybym znalazł przed funkcją .change(), to nie wiem jak.

Przeciez masz obiekt swiezo dodanego bloku wiec to
$('select.wyborPozycji').on('change', function() {

masz robic tyko na tym bloku a nie na wszystkich.

Od biedy dodaj to raz przez .on() i po sprawie

Nie ma to znaczenia, id znajdujesz w środku obsługi zdarzenia i tak samo będziesz robić, kiedy wyprowadzisz obsługę zdarzenia change na zewnątrz click.

Nie rozumiem jednak jednej rzeczy. Czemu nie nadajesz jednemu elementowi (nadrzędnemu) id, tylko pozycje podrzędne <select> i OBLICZ mają powtórzone id. A skoro je mają, to czemu nie korzystasz z tego id, tylko szukasz w elemencie nadrzędnym?

dobra, masz
https://jsfiddle.net/0kacyru1/

strasznie to pokreciles. Na szybko dodalem poprostu off by wyzerowac wszystko co nadaowales wczesniej

Ogólnie to kod eksperymentalny.

Dlatego nie używam wartosci z button OBLICZ (stricte button dotyczy pola input, gdzie mam dokładnie ten sam problem, też powielają się wartości)


@Nospor
Chodziło Ci - JESZCZE raz .on()?

nospor'owi chodziło o delegację zdarzeń, którą proponowałem Ci w punkcie 1.

Nie, nie dolukalem ze masz tam juz on, ktore notabene walisz totalnie bez sensu w petli... Chyba nie zaczailes idei .on()
Tak czy siak podalem ci linka do kodu, ktory dziala (chyba) jak chcesz

Widzę że dodałeś prosty kod:

(Swoją drogą, międzyczasie doczytałem w manualu jQuery o tym, ale nie użyłem jej, bo nie wiedziałem że to rozwiąże problem)

Właśnie, problemem dla mnie jest pominięcie dla tego kodu pętli. I nie wiem jaką drogą musiałbym iść aby osiągnąć ten sam efekt inaczej.

.on() masz odpalac tylko raz a nie w petli. Na tym polega jego magia, ze ta metoda lapie rowniez przyszle elelemnty, ktore dopiero sie pojawia.

Prosze
https://jsfiddle.net/jja7y9p8/

Poczytaj https://prophp.pl/article/28/propagacja_i_d...en_w_javascript oraz artykuł wcześniej tam podlinkowany. Jak tego nie zrozumiesz to nawet nie ma co się zabierać za pisanie kodu js bo zdarzenia to podstawa.

Jutro przeanalizuje ten kod, ale już coś rozumiem.
Artykuł również jest bardzo wartościowy. Także jutro na spokojnie przeczytam ponownie.

Dziękuję za pomoc.