Zdarzenie onChange dla wszystkich SelectBoxów

0

Za pomocą MySQL i PHP wyświetlam na ekran około 100 rekordów, przy każdym rekordzie stoi SelectBox:

<select class="form-control selectstatus" name="status" data-id="'.$q_tb['id'].'">
     <option value="3">anulowany</option>
     <option value="0">awizowany</option>
     <option value="1">brak zapłaty</option>
     <option value="2">w trakcie</option>
</select>

Teraz gdy zmienię opcję w którymkolwiek SelectBoxie to ma przeładować content w divie:

function getContent(){
     jQuery.post("content.php", function(data){
     jQuery("#mojdiv").html(data);
});

function set_status(p1, p2){
    $.ajax({
    url: 'content/ajax.php',
    type: 'POST',
    data: { action: 'setStatus', item_id: p1, status: p2},
    success: function(data){
            getContent();
    }
});

$('select').change(function() {
    set_status($(this).data('id'), $(this).val());
});

Działa to tylko raz. Problem leży prawdopodobnie w tym, że każdy SelectBox nie ma własnego ID i zdarzenia onChange przypisanego do siebie. Jak zatem zrobić zdarzenie, które nasłuchuje wszystkie SelectBoxy i wykonuje coś? Przecież nie wiem dokładnie ile rekordów wyciągam z bazy, dlatego nie jestem w stanie stworzyć dla każdego rekordu osobnego zdarzenia. Jak to zrobić?

1

Po pierwsze wygląda na to, że brakuje Ci klamry zamykającej funkcję getContent().
Domyślam się też, że select, do którego się przypinasz ze zdarzeniem change jest podmieniany w tej linijce: jQuery("#mojdiv").html(data);

Jeśli tak, to w momencie załadowania strony ten select istnieje w strukturze DOM i kod:

$('select').change(function() {
    set_status($(this).data('id'), $(this).val());
});

przypina zdarzenie change tylko do tego konkretnego selecta.
Po załadowaniu nowego contentu i ustawienie go za pomocą .html() już masz inny select - do niego to zdarzenie nie jest przypięte.
W efekcie funkcja set_status wykonuje się tylko raz.

Rozwiązania są dwa.

  1. Wykorzysatnie metody .on() w następujący sposób:
$(document).on('change','select', function() {
    set_status($(this).data('id'), $(this).val());
});

Teraz przypinasz zdarzenie change do obiektu document, który istnieje zawsze. Zatem za każdym razem, gdy zostanie ono odpalone, wyszukiwane są wszystkie elementy select w strukturze DOM - w efekcie funkcja set_status zostanie wykonana na zdarzenie change dla każdego selecta jaki kiedykolwiek pojawi się w strukturze DOM.

  1. Wraz z treścią pliku content.php zwracać JS, który ponownie do tego selecta przypnie zdarzenie change.

[Adam]

1 użytkowników online, w tym zalogowanych: 0, gości: 1