Kohandatud jQuery sündmuste miks ja kuidas

Alates versioonist 1.0 on jQuery pakkunud päästikufunktsiooni, mis võimaldab meil:

Käivitage kõik antud sündmusetüübi jaoks sobitatud elementidele lisatud käitlejad ja käitumised.

Kuid alles 1.3 muutus see konkreetne funktsioon oluliselt kasulikumaks, vähemalt minu jaoks. Ütlen seda sellepärast, et just siis saime võimaluse määratleda kohandatud sündmusi ja seejärel määrata neile töötlejad.

Mis on aga tõenäoline kasutusjuht, mille puhul kohandatud jQuery sündmused on WordPressi kontekstis kasulikud? Pealt lahkudes võite võib-olla palju välja mõelda. Või äkki mitte.

Alles viimasel ajal olen neid tavapärasest oluliselt rohkem kasutanud. Seega mõtlesin, et jagan, kuidas ma neid kasutan, kui praegu muul põhjusel kui näitan teile, kuidas neid oma tööga ühendada.

Kohandatud jQuery sündmused

Kui olete JavaScriptiga kogenud – kas vanilje või mitte – olete tõenäoliselt tuttav põhiliste sündmuste käitlejatega. See tähendab, et kui keegi klõpsab elemendil, on meil käivitatud funktsioon, mis teeb midagi.

Kohandatud jQuery sündmused on palju sarnased, välja arvatud need sündmused, mille me määratleme. See tähendab, et me ei pea lootma sellele, kui keegi viib hiire elemendi kohale või klõpsab elemendil.

Selle asemel saame käivitada sündmuse ja seejärel seadistada töötleja, et reageerida asjakohaselt. Siin on näide.

Kohandatud sündmuseks valmistumine

Oletame, et töötate projekti kallal ja sellel on haldusleht, mis vastutab andmete hankimise eest kolmanda osapoole API-st. Juhtimisvoog näeks välja umbes selline:

1. Kasutaja klõpsab nuppu,
2. Ajaxi päring algatatakse ja see nõuab teavet kolmandalt osapoolelt,
3. Taotluse täitmise ajal tuleks ekraanil olevad nupud keelata,
4. Kui taotlus on täidetud, saab nupud uuesti lubada,
5. Soovi korral saab ekraanile kirjutada olekuteate.

Selleks eeldatakse, et päringu olek võib esineda vähemalt ühe nupu (nagu sisestuselemendis) ja valikulise tekstivälja või tekstiala.

Kui kasutaja klõpsab sündmusel, saame käivitada kohandatud sündmuse. Seda sündmust võime nimetada acme.ajax.processing. Seejärel saame kasutada jQuery pakutavat valmis funktsiooni, et käsitleda kõike, mida tahame hiljem puhastada, või saame kasutada oma kohandatud funktsiooni, kui tahame ka midagi teha.

Selle mõlema puhul vaatame mõlemat. Nii et meil on ka üritus nimega acme.ajax.complete.

Seega oleme mures:

• kohandatud sündmuse loomine,
• käivitades selle,
• selle jaoks sündmuste töötleja seadistamine,
• lõpetada, kui taotlus on täidetud.

Ja seda me teemegi.

Kohandatud sündmuse määratlemine

Nii et kui kasutaja klõpsab nupul, tehakse Ajaxi päring. Samal ajal käivitab see ka sündmuse acme.ajax.processing, millel on sündmuste töötleja.

Nii et kõigepealt loome Ajaxi päringu. Selle jaoks eeldan, et nuppu, mis vastutab Ajaxi päringu käivitamise eest, nimetatakse lihtsalt $ nupuks:

$button.on('click', function(evt) {
  evt.preventDefault();
  $(document).trigger('acme.ajax.processing');

  $.get(ajaxurl, {
    // Your action and security measures here.
  }, function(response) {
    // Your response behavior here.
  });
});

Pange tähele, et esimene asi, mida tahame teha, on käivitada töötlemissündmus, seejärel esitame taotluse.

Kohandatud sündmuse käsitlemine

Järgmiseks tahame veenduda, et meil on seadistatud sündmuste töötleja, mis keelab nupu päringu täitmise ajal.

Seda on lihtne teha ja see jääb lihtsaks ning ma keelan nupu:

$(document).on('acme.ajax.processing', function() {
  $button.attr('disabled', 'disabled');
});

Lihtne, eks?

Teise kohandatud sündmuse käsitlemine

Järgmiseks peame lahendama olukorra, kui Ajaxi taotlus on täidetud. Seega peame sündmuse käivitama ja seejärel sündmusega hakkama saama.

Sündmuse käivitamine on lihtne:

$button.on('click', function(evt) {
  evt.preventDefault();
  $(document).trigger('acme.ajax.processing');

  $.get(ajaxurl, {
    // Your action and security measures here.
  }, function(response) {
    // Your response behavior here.
  })
  .done(function() {
     $(document).trigger('acme.ajax.complete');
  });
});

Ja sündmuse haldamise saab muuta koodiks, mis meil juba on:

$(document)
  .on('acme.ajax.processing', function() {
    $button.attr('disabled', 'disabled');
  })
  .on('acme.ajax.complete', function() {
    $button.removeAttr('disabled');
  });

Seda saab aheldada, kuna see toimub dokumendiobjektil, mitte eraldi elemendil.

Selleks on seda palju lihtsam käsitseda.

Vaid Üks näide

Loomulikult on see vaid üks näide kohandatud jQuery sündmuste käsitlemisest.

Selleks on palju muid viise ja sellega saab teha päris keerulisi asju; see peaks aga andma piisavalt teavet selle kohta, mida vajate kohandatud sündmustega põhitasemel töötamiseks.