Jak pobrać wartości z dynamicznie generowanych elementów?

Question

Hej. Z JS i jQuery nie miałem wcześniej większego kontaktu, do tej pory bawiłem się głównie PHP. Napisałem prostego CRUD'a. Chcę dodać dwuetapowe usuwanie rekordu, czyli klikam na "kosz" wyskakuje alert, "Czy na pewno?" i dopiero następuje usunięcie rekordu z bazy. Robię to przy pomocy sweetalerów.

Sam mechanizm usuwania działa ok, tylko mam problem z przekazaniem wartości danego (wygenerowanego dynamicznie) elementu do jQuery. Za każdym razem pobiera wartość ( ID z bazy danych, włożone w atrybut value, nie jest to ID html ) tylko pierwszego rekordu na liście, a nie tego, przy którym faktycznie kliknę Delete.

Czy moglibyście nakierować mnie jak można wskazać js/jquery, że został kliknięty przycisk, akurat przy rekordzie np. Jan Kowalski, który jest gdzieś w losowym miejscu tabeli?

Z góry dzięki za pomoc. (Nie wrzucam na razie kodu, bo chyba pytanie tego nie wymaga. Jeśli kod jednak okaże się niezbędny dajcie znać. )

Answer 1

Czy moglibyście nakierować mnie jak można wskazać js/jquery, że został kliknięty przycisk, akurat przy rekordzie np. Jan Kowalski, który jest gdzieś w losowym miejscu tabeli?

Referencję do wciśniętego przycisku możesz pobrać z event.target.

Nie wrzucam na razie kodu, bo chyba pytanie tego nie wymaga. Jeśli kod jednak okaże się niezbędny dajcie znać.

Sam opis pomaga nakreślić problem, ale analiza kodu jest zazwyczaj niezbędna w znalezieniu przyczyny, dlaczego aplikacja działa inaczej niż powinna.

Comments

O super, dzięki poczytam o tym!

W między czasie ogarnąłem to w trochę inny sposób, który jest stosunkowo bardzo prosty i nie wiem czemu tak długo zajęło mi, żeby na to wpaść (Choć trochę nakierował mnie na to znajomy). Napiszę jak ja to rozwiązałem, może komuś się przyda kiedyś:

1. Napisałem funkcję w JS, która przyjmuje jeden argument (id). W funkcji, na początku odpalam sweetalert.
2. Jeśli potwierdzę wykonanie akcji, wysyłam ajaxem argument funkcji(id) do PHP. A skąd wziąłem argument dla funkcji?
3. W HTML stworzyłem przycisk, na bazie inputu. Dodałem atrybut onClick, który wywołuje daną funkcję, jako argument wrzuciłem zmienną {{ client.id }}. Trzeba dobrze ustawić cudzysłowy - pojedyncze na zewnątrz, w podwójnych zmienna id.
4.  Korzystam z silnika template'tów Twig, za jego pomocą wrzucam zmienne z PHP do kodu HTML. Stąd właśnie to {{ client.id }}.

Tym właśnie sposobem, można wskazywać wybrane przyciski w tabeli z rekordami. Może nie idealne, ale działa. Podrzucam trochę kodu:

JS:

function removeRow(id){
                swal({
                    title: "Are you sure?",
                    text: "Once deleted, you will not be able to recover this imaginary file!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                    })
                    .then((willDelete) => {
                        if (willDelete) {
                            $.post("delete.php", {
                                id: id
                            }, function(){
                                location.reload();
                            });
                        } else {
                            
                        }
                    });
            };

  HTML:

<input type="button" onClick='removeRow("{{ item.id }}")'>

JSHolic, wielkie dzięki za czas i pomoc! ;)