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 clic pe un link cu class="cls".
<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="https://marplo.net" title="Cursuri Gratuite" class="cls">marplo.net</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):
<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.
<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>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Inregistrare evenimente la elemente incluse cu jQuery ajax

Last accessed pages

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (46828)
  2. Lectii audio-video de limba engleza (9166)
  3. PHP PDO - exec INSERT UPDATE DELETE MySQL (468)
  4. Curs complet de limba engleza, incepatori (5623)
  5. Substantivul din limba engleza - The Noun (24820)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2915)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2056)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1561)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1210)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1179)