I jQuery 1.3 introduserte teamet live () -metoden, noe som gjør at vi kan binde hendelseshåndterer til elementer på siden, så vel som alle som kan opprettes i fremtiden dynamisk. Selv om det ikke var perfekt, viste det seg å være nyttig. Mest spesielt, live () bobler hele veien opp, og legger håndterer til dokumentet. Det slutter også å fungere godt når kjedemetode kaller, dessverre. Delegat () ble introdusert i versjon 1.4, som nesten gjør det samme, men mer effektivt.
Vi vil undersøke de spesifikke forskjellene mellom de to metodene i dagens videosnabbtips. Takket være FireQuery Firebug-utvidelsen, har vi verktøyene for å lettere forstå hvordan hver metode fungerer.
Alternativ visningsalternativer
Screenr (MP4)
Klikk på meg
// Bind knytter bare en hendelseshandler til elementene // som samsvarer med en bestemt velger. Dette, forventet, // ekskluderer dynamisk genererte elementer. $ ("# items li"). klikk (funksjon () $ (dette) .parent (). append ("
Nytt element
");;); // Live (), introdusert i 1.3, gir mulighet for bindingen // av hendelseshåndterer til alle elementer som samsvarer med en // -velger, inkludert de som er opprettet i fremtiden. // Det gjør dette ved å feste Handler til dokumentet. // Dessverre virker det ikke bra med kjetting. // Forvent ikke å kjede live () etter samtaler som // barn (). neste () ... etc. $ ("li"). live ("klikk", funksjon () $ (dette) .parent (). append ("
Nytt element
");); // Delegat, nytt til versjon 1.4, bør kanskje ha vært en komplett // erstatning for Live (). Men det åpenbart // ville ha brutt mye kode! Ikke desto mindre, // delegerte rettsmidler mange av short-comings // funnet i live (). Det fester hendelseshandleren // direkte til konteksten, snarere enn dokumentet. // Det lider heller ikke av chainingproblemene // som lever gjør. Det er mange ytelsesfordeler // å bruke denne metoden over live (). $ ('# items'). delegat ('li', 'klikk', funksjon () $ (dette) .parent ()
Nytt element
'); ); // Ved å sende et DOM-element som konteksten til väljeren, kan vi gjøre // Live () oppføre (nesten) på samme måte som delegere () // gjør. Det fester håndtereren til konteksten, ikke // dokumentet - som er standardkonteksten. // Koden nedenfor er lik delegaten () versjon // vist ovenfor. $ ("li", $ ("# items") [0]) live ("klikk", funksjon () $ (dette) .parent () .append
Nytt element
"););
Konklusjon
Dette kan definitivt være et forvirrende tema. Ta gjerne spørsmål, eller diskuter i kommentarene. Takk så mye til Elijah Manor for å klargjøre noen ting for meg på dette emnet!
Share
Accentsconagua
