- Inregistrare eveniment pt. elemente adaugate dinamic
- Inregistrare evenimente sa se emita o singura data
- Stergere eveniment

Inregistrare Evenimente

Metoda jQuery .on() raspunde la orice eveniment atasat la elementul selectat.
Sintaxa:
element.on('event_name', function(eventObject){
 //your code...
});
- event_name - numele evenimentului (click, hover, change, input, etc..).
- eventObject - obiect cu elementul care actioneaza evenimentul. Aplicati: console.table(eventObject) in functia evenimentului si vedeti in consola din browser un tabel cu proprietatile acelui obiect.

Exemplu: Cand se apasa clic pe Div-urile cu clasa css 'ev_cls', va afisa un alert cu continutul Div-ului.
<div class='ev_cls'>What appears and disappears is not real.</div>
<div class='ev_cls'>Forgiveness is the real cure.</div>
<script>
$('.ev_cls').on('click', function(ev){
 alert($(this).html());
});
</script>
Demo, clic pe fiecare text.
What appears and disappears is not real.
Forgiveness is the real cure.

Inregistrare mai multe evenimente in aceeasi metoda

Metoda .on() care poate contine mai multe evenimente si functii callback. Astfel, se pot inregistra mai multe evenimente pentru acelasi selector in metoda .on().
$('div').on({
 mouseenter: function(){
 console.log('hovered over a div');
 },
 mouseleave: function(){
 console.log('mouse left a div');
 },
 click: function(){
 console.log('clicked on a div');
 }
});

Transmitere date la functia callback

Se poate transmite un obiect cu date (ca al doilea argument) care va fi adaugat in obiectul evenimentului. Obiectul transmis va fi adaugat in proprietatea eventObject.data.
$('div').on('click', {prop:'value'}, function(ev){
 console.log('event data:'+ ev.data.prop +' (should be "value")');
});

Inregistrare eveniment pt. elemente adaugate dinamic

Metoda jQuery .on() permite sa inregistrati evenimente care vor fi emise si la noi elemente adaugate dinamic.
In mod normal, evenimentul se inregistreaza la elementele care sunt prezente cand se face inregistrarea.
Sa vedem un exemplu:
<ul id='list'>
<li>Item #1</li>
<li>Item #2</li>
</ul>

<script>
//when click on the LI in #list, alert clicked LI content
$('#list li').on('click', function(ev){
 alert($(this).html());
});

//automatically append another LI in #list
$('#list').append('<li>Appended Item #3</li>');
</script>
In codul de sus, cand se apasa clic pe un LI din #list, este afisat continutul acelui LI.
Dar cand se adauga dinamic inca un LI in #list (Appended Item #3), la clic pe el nu se intampla nimic, deoarece inregistrarea s-a facut direct pentru elementele "#list li", care nu stie de ceea ce va fi adaugat in viitor.

- Demo, clic pe fiecare text:
- Pentru ca evenimentul sa se emita si la noile elemente adaugate dinamic, se foloseste o tehnica denumita "event delegation".
Se aplica evenimentul la metoda parinte (aici #list), apoi, selectorul pentru elementele copil (aici 'li') se adauga ca al doilea argument in metoda .on().
<script>
//when click on #list, alert its clicked LI content, even newly LI
$('#list').on('click', 'li', function(ev){
 alert($(this).html());
});

//automatically append another LI in #list
$('#list').append('<li>Appended Item #3</li>');
</script>
Evenimentu 'click' aplicat la #list va urmari clic-urile pe elementele copil 'li', inclusiv cele care vor fi adaugate in viitor.

- Demo: acum dati clic pe "Item #3".

Inregistrare evenimente sa se emita o singura data

Daca vreti sa inregistrati un eveniment care sa fie emis o singura data, folositi metoda .one().
- Exemplu: cand se apoasa clic pe un buton #ex_btn, functia atasata se executa doar la primul clic.
<button id='ex_btn'>Click</button>

<script>
$('#ex_btn').one('click', function(ev){
 alert('Next clik will not be emitted');
});
</script>
Demo:
Metoda .one() accepta aceleasi argumente ca si .on(); suporta evenimente multiple, transmitere date la eventObject, si event-delegation.

Stergere eveniment

Daca vreti sa stergeti inregistrarea unui eveniment, folositi metoda .off().
- Exemplu: dupa ce se da clic de doua ori pe #c2_btn, evenimentul 'click' la acel selector este anulat.
<button id='c2_btn'>Click</button>

<script>
var c2_nrc =0;
$('#c2_btn').on('click', function(ev){
 c2_nrc++;
 $(this).text('Clicks: '+ c2_nrc);

 if(c2_nrc ==2) $('#c2_btn').off('click'); //removes the click
});
</script>
Demo, clic de doua ori pe urmatorul buton. A treia oara clic-ul nu va fi emis:

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
jQuery - Utilizare evenimente cu metoda on()

Last accessed pages

  1. Lucru cu Baza de Date MySQL in Laravel (402)
  2. laravel tutorial - Utilizare Cookie (139)
  3. Laravel tutorial - Routing (748)
  4. Utilizare array 2 (504)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (33215)

Popular pages this month

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