[TUT] Inregistrare evenimente la elemente incluse cu jQuery ajax

[ActiON_]

Inregistrare evenimente la elemente incluse cu jQuery ajax

Pentru a inregistra cu jQuery un eveniment JavaScript la elemente HTML, se foloseste aceasta sintaxa:

$('element').nume_eveniment(function() {
  // cod ce va fi executat cand "nume_eveniment" e declansat
})

De exemplu, urmatorul cod afiseaza o fereastra alert cand se apasa click pe un link cu class="cls".

Code: [Select]

<script type="text/javascript"><!--
$(document).ready(function() {
  // la clic pe link cu class="cls", afiseaza alert cu textul link-ului
  $('a.cls').click(function() {
    alert($(this).text())
  });
});
--></script>
<a href="http://www.skilledg.com" title="Tutoriale" class="cls">www.skilledg.com</a>

Dar daca link-ul e intr-un cod inclus mai tarziu in pagina prin ajax, scriptul de mai sus nu va functiona si pentru acel link deoarece cand codul jQuery este executat (cand pagina e incarcata), acel link nu se afla in pagina.
Dar solutia e simpla, astfel, pentru a inregistra evenimente (click, mouseover, submit, ...) la elemente HTML adaugate cu ajax, codul ce inregistreaza acel eveniment trebuie executat si dupa ce raspunsul ajax e primit. Pt. a face acest lucru, doar scrieti acel cod jQuery intr-o functie, apoi apelati acea functie in jQuery.ready(), si in functia ajax, dupa ce raspunsul de la server e primit si adaugat in pagina.
- Exemplu (vedeti comentariile din cod):

Code: [Select]

<script type="text/javascript"><!--
// seteaza o functie ca sa inregistreze evenimentul click la "a.cls"
function clickAcls() {
  // la clic pe un link cu class="cls" afiseaza alert cu textul link-ului
  $('a.cls').click(function() {
    alert($(this).text())
  });
}

$(document).ready(function() {
  clickAcls();       // acceseaza functia ca sa inregistreze eveniment click pt "a.cls"

  // cand datele din formularul "#frm" sunt transmise
  $('#frm').submit(function() {
    // aici se pot pelua datele din formular, si se definesc datele_de_trimis

    // seteaza metoda ajax() si include raspunsul in tag-ul HTML cu id="resp"
    $.ajax({
      type: 'post',
      data: 'datele_de_trimis',
      url: 'script.php',
      error: function(xhr, status, error) { alert('Eroare: '+ xhr.status+ ' - '+ error); },
      success: function(response) {
        $('#resp').html(response);

        // acceseaza functia ca sa inregistreze eveniment click pt "a.cls" adaugat in raspuns
        clickAcls();
      }
    });

    return false;      // ca sa nu deschida pagina ca se trimite formularul
  });
});
--></script>

• Aceasta metoda poate fi aplicata pt. toate tipurile de evenimente.
Iata inca un exemplu. Se inregistreaza "submit" pentru toate formularele, ca sa trimita datele din formular prin ajax, apoi include raspunsul in tag-ul cu id="resp". Evenimentul "submit" va fi inregistrat inclusiv pt. formulare adaugate cu ajax.

Code: [Select]

<script type="text/javascript"><!--
// Executa cererea Ajax
function ajaxSend(file, datele_de_trimis, resp) {
  // defineste si executa jQuery Ajax
  $.ajax({
    type: 'post',
    url: file,
    data: datele_de_trimis,
    error: function(xhr, status, error) { alert('Eroare: '+ xhr.status+ ' - '+ error); },     // alert mesaj in caz de eroare
    success: function(response) {
      resp.html(response);

      // apeleaza submitForm() ca sa inregistreze submit la formulare din raspunsul ajax
      submitForm();
    }
  });
  return false;
}

// trimite formularul cu ajaxSend()
function submitForm() {
  // cand sunt transmise date dintr-un formular
  $('form').submit(function() {
    // aici se pot pelua datele din formular, si se definesc datele_de_trimis la server

    ajaxSend('script.php', 'datele_de_trimis', $('#resp'));        // acceseaza functia pt Ajax

    return false;      // ca sa nu deschida pagina ca se trimite formularul
  });
}

$(document).ready(function() {
  submitForm();       // apeleaza functia ca sa inregistreze eveniment submit
});
--></script>

Sursa: marplo.net