[jQuery] Zwielokrotniony wydruk treści przez JS Opcje

[Tomplus]

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:

Kod

[1.1 ] Pozycja 3 S: POLICZ 1 IDP: 1 Pozycja: 2
[1.1 ] Pozycja 3 S: POLICZ 1 IDP: 1 Pozycja: 2
[1.1 ] Pozycja 3 S: POLICZ 1 IDP: 1 Pozycja: 2
[2.2 ] Pozycja 3 S: KALKULUJ 1 IDP: 1 Pozycja: 3
[2.2 ] Pozycja 3 S: KALKULUJ 1 IDP: 1 Pozycja: 3
[2.2 ] Pozycja 3 S: KALKULUJ 1 IDP: 1 Pozycja: 3
[3.3 ] Pozycja 3 S: OBLICZ 1 IDP: 1 Pozycja: 1
[3.3 ] Pozycja 3 S: OBLICZ 1 IDP: 1 Pozycja: 1
[3.3 ] Pozycja 3 S: OBLICZ 1 IDP: 1 Pozycja: 1

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ść.

[trueblue]

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).

[Tomplus]

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.

[nospor]

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

[trueblue]

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?

[nospor]

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

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

[Tomplus]

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()?

[trueblue]

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

[nospor]

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

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

[Tomplus]

Widzę że dodałeś prosty kod:

Kod

$('select.wyborPozycji').off();

(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.

[nospor]

.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/

[viking]

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.

[Tomplus]

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.