jquery .live(‘click’) vs .click() (Programare, Jquery, Live)

kalpaitch a intrebat.
a intrebat.

Mă întreb dacă există circumstanțe în care ar fi mai bine să folosiți .click(function {...}); în loc de .live('click', function {...});?

Din câte am înțeles, opțiunea live pare a fi o opțiune mai bună și, prin urmare, o folosesc în aproape toate circumstanțele în loc de simplu .click(), mai ales având în vedere că o mare parte din codul meu este încărcat asincron.

EDIT:O altă parte a acestei întrebări. Dacă încarc în mod asincron tot javascript-ul, .click va prelua în continuare toate elementele deja existente în dom. Corect?

Comentarii

  • Notă: live() este acum depreciat. –  > Por UpTheCreek.
  • Nu, este depreciat 😉 –  > Por Jay.
  • Metoda live() a fost depreciată în versiunea jQuery 1.7 și eliminată în versiunea 1.9. –  > Por SHEKHAR SHETE.
11 răspunsuri
Nathan MacInnes

S-ar putea să existe momente în care doriți în mod explicit să atribuiți gestionarul de clic doar obiectelor care există deja și să tratați diferit obiectele noi. Dar, mai frecvent, live nu funcționează întotdeauna. Nu funcționează cu instrucțiuni jQuery înlănțuite, cum ar fi:

$(this).children().live('click',doSomething);

Are nevoie de un selector pentru a funcționa corect din cauza modului în care evenimentele urcă în arborele DOM.

Editați: Cineva tocmai a upvoted acest lucru, așa că, evident, oamenii încă se uită la el. Ar trebui să subliniez că live și bind sunt ambele depreciate. Le puteți efectua pe amândouă cu .on(), care, potrivit IMO, este o sintaxă mult mai clară. Pentru a înlocui bind:

$(selector).on('click', function () {
    ...
});

și pentru a înlocui live:

$(document).on('click', selector, function () {
    ...
});

În loc de a utiliza $(document), puteți utiliza orice obiect jQuery care conține toate elementele pe care monitorizați clicurile, dar elementul corespunzător trebuie să existe atunci când îl apelați.

Comentarii

  • Doar o notă secundară: acestea sunt depreciate începând cu jQuery 1.7. Versiunile anterioare ar trebui să utilizeze delegate în loc de live începând cu jQuery 1.4.3. Dacă sunt mai mici, atunci folosiți live. –  > Por Luis Lobo Borobia.
  • +1 pentru că ai ținut la zi un răspuns vechi de 2 ani, care ar indica o mulțime de oameni în direcția corectă în loc să facă un lucru greșit. –  > Por Immutable Brick.
T.J. Crowder

(Notă 29/08/2017: live a fost depreciat cu multe versiuni în urmă și eliminat în v1.9. delegate a fost depreciată în v3.0. În ambele cazuri, utilizați semnătura de delegare a on în schimb [abordată și mai jos]).


live se întâmplă prin capturarea evenimentului atunci când acesta a urcat în tot DOM până la rădăcina documentului și apoi se uită la elementul sursă. click se întâmplă prin capturarea evenimentului pe elementul în sine. Așadar, dacă utilizați liveși unul dintre elementele strămoșești captează direct evenimentul (și îl împiedică să continue să se desfășoare), nu veți vedea niciodată evenimentul pe elementul dumneavoastră. În timp ce, în mod normal, elementul cel mai apropiat de eveniment (click sau orice altceva) este cel care îl captează primul, combinația de live și alte elementelive evenimente poate schimba acest lucru în moduri subtile.

De exemplu:

Aș recomanda să folosiți delegate în loc de live atunci când se poate, pentru a putea controla mai bine domeniul de aplicare; cu delegate, controlați elementul rădăcină care captează evenimentul de bubbling (de ex, live este practic delegate folosind rădăcina documentului ca rădăcină). De asemenea, recomandați să evitați (dacă este posibil) să aveți delegate sau live interacțiunea cu manipularea evenimentelor nedelegate, care nu sunt în direct.


Aici, câțiva ani mai târziu, nu ați folosi nici live sau delegate; ați folosi semnătura delegantă a lui on, dar conceptul este în continuare același: evenimentul este agățat de elementul pe care îl apelați on dar este declanșat numai atunci când descendenții se potrivesc cu selectorul dat după numele evenimentului:

fmsf

Toate obiectele care vor fi asociate cu .click trebuie să existe atunci când setați evenimentul.

Exemplu: (în pseudocod), anexa poate fi $("body").append() de exemplu

append('<div id="foo" class="something">...</div>');
$("div.something").click(function(){...});
append('<div id="bar" class="something">...</div>');

Click funcționează pentru foo, dar nu funcționează pentru bar

Exemplu2:

append('<div id="foo" class="something">...</div>');
$("div.something").live("click",function(){...});
append('<div id="bar" class="something">...</div>');

click funcționează atât pentru foo, cât și pentru bar

Cu .live(‘click’…. puteți adăuga în mod dinamic mai multe obiecte după ce ați creat evenimentul, iar evenimentul de clic va funcționa în continuare.

Comentarii

  • cool, acesta este motivul pentru care folosesc .live. Sunt curios să aflu dacă există avantaje și în sens invers. –  > Por kalpaitch.
  • nu voi vota împotrivă, dar nu asta a fost chiar întrebarea care a fost pusă. Frumoasă explicație totuși. –  > Por Thomas Clayson.
  • de fapt asta răspunde exact la întrebarea care m-a condus aici. Acum înțeleg de ce .click nu reușește, iar .live(„click”,…) funcționează – am o problemă de ordonare, deoarece nu am creat elementul de care are nevoie .click în momentul în care este apelat și, prin urmare, evenimentul meu nu este apelat, în timp ce .live nu ține cont de ordine și, prin urmare, funcționează. –  > Por Rob.
Dl Black

„live” este necesar atunci când generați dinamic codul.Uitați-vă la exemplul de mai jos :

fără „live”, evenimentul de clic apare doar atunci când faceți clic pe primul buton, cu „live” evenimentul de clic apare și pentru butoanele generate dinamic.

Comentarii

  • Un exemplu minunat pentru a explica! –  > Por manish_s.
Felix Kling

Utilizați întotdeauna click dacă nu adăugați elemente în mod dinamic.

live funcționează prin adăugarea unui ascultător de evenimente la rădăcina documentului și ascultă evenimentele de tip bubbled up. O alternativă este delegate, care funcționează la fel, dar leagă gestionarul de evenimente la elementul specificat.
În acest fel, evenimentul nu mai trebuie să umfle întregul DOM și este detectat mai devreme.

dotty

.live() se utilizează în cazul în care elementele sunt adăugate după încărcarea inițială a paginii. Să presupunem că aveți un buton care este adăugat printr-un apel AJAX după ce pagina este încărcată. Acest nou buton nu va fi accesibil folosind .click(), așa că va trebui să folosiți .live(‘click’).

Comentarii

  • .live() – versiune depreciată: 1.7, eliminat: 1.9! Utilizați .on() –  > Por Andrei Krasutski.
Joe Green

Din câte am înțeles, diferența cheie este că live() rămâne cu ochii în patru pentru noi elemente DOM care se potrivesc cu selectorul pe care lucrați, în timp ce click() (sau bind(‘click’)) atașează cârligul de eveniment și s-a terminat.

Având în vedere că o mare parte din codul dvs. este încărcat în mod asincron, utilizarea live() vă va face viața mult mai ușoară. Dacă nu cunoașteți exact codul pe care îl încărcați, dar știți ce fel de elemente veți asculta, atunci utilizarea acestei funcții este perfect logică.

În ceea ce privește creșterea performanțelor, o alternativă la utilizarea live() ar fi implementarea unei funcții de callback AJAX pentru a re-binde cârligele de eveniment.

var ajaxCallback = function(){
 $('*').unbind('click');
 $('.something').bind('click', someFunction);
 $('.somethingElse').bind('click', someOtherFunction);
}

Va trebui să urmăriți în mod corespunzător cârligele de evenimente și să vă asigurați că această funcție reia evenimentele corespunzătoare.

p.s. Metodele Ajax .get(), .post(), .load() și .ajax() vă permit toate să specificați o funcție de apelare.

Lee Atkinson

Deoarece „live” va gestiona evenimentele pentru elementele viitoare care se potrivesc cu selectorul curent, puteți alege click, deoarece nu doriți să se întâmple acest lucru – doriți să gestionați doar elementele selectate curent.

De asemenea, bănuiesc (deși nu am nicio dovadă) că există o ușoară eficiență folosind „click” în locul lui „live”.

Lee

oryol

Dacă aveți nevoie să simplificați codul, atunci live este mai bun în majoritatea cazurilor. dacă trebuie să obțineți cea mai bună performanță, atunci delegate va fi întotdeauna mai bun decât live. bind (click) vs delegate nu este o întrebare atât de simplă (dacă aveți o mulțime de elemente similare, atunci delegate va fi mai bun).

Fernando

nu uitați că utilizarea lui „live” este pentru „jQuery 1.3” sau mai mare.

în versiunea „jQuery 1.4.3” sau mai mare se folosește „delegate”.

iar în versiunea „jQuery 1.7 +” sau mai mare se folosește „on”

$( selector ).live( events, data, handler ); // jQuery 1.3+
$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
$( document ).on( events, selector, data, handler ); // jQuery 1.7+

Începând cu jQuery 1.7, metoda .live() este depășită.

verificați http://api.jquery.com/live/

Cu respect, Fernando

Comentarii

  • … și acum, începând cu versiunea jQuery 1.9.x, metoda .live metodă a fost eliminată. –  > Por Matt.
Matt

În plus față de răspunsul lui T.J. Crowders, am adăugat mai multe gestionari – inclusiv cea mai nouă metodă .on(...) handler la fragment, astfel încât să puteți vedea care evenimente sunt ascunse și care nu.

Ceea ce am constatat, de asemenea, este că .live() nu numai că este depreciat, dar a fost eliminat încă de la jQuery 1.9.x. Dar celelalte, adică
.click, .delegate/.undelegate și .on/.off
sunt încă acolo.

De asemenea, rețineți că există mai multe discuții despre acest subiect aici pe Stackoverflow.

Dacă aveți nevoie să reparați codul vechi care se bazează pe .live, dar aveți nevoie să utilizați o versiune nouă de jQuery (> 1.8.3), îl puteți repara cu acest fragment:

// fix if legacy code uses .live, but you want to user newer jQuery library
if (!$.fn.live) {
    // in this case .live does not exist, emulate .live by calling .on
    $.fn.live = function(events, handler) {
      $(this).on(events, null, {}, handler);
    };
}

Intenția snippet-ului de mai jos, care este o extensie a script-ului lui T.J., este ca să puteți încerca singur instantaneu ce se întâmplă dacă legați mai mulți handleri – așa că vă rugăm să rulați snippet-ul și să faceți clic pe textele de mai jos:

Tags:,