{"id":230349,"date":"2022-12-08T17:32:00","date_gmt":"2022-12-08T14:32:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230349"},"modified":"2022-12-07T11:54:37","modified_gmt":"2022-12-07T08:54:37","slug":"varfoer-och-hur-foer-anpassade-jquery-haendelser","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/varfoer-och-hur-foer-anpassade-jquery-haendelser\/","title":{"rendered":"Varf\u00f6r och hur f\u00f6r anpassade jQuery-h\u00e4ndelser"},"content":{"rendered":"\n

S\u00e5 l\u00e5ngt tillbaka som 1.0 har jQuery tillhandah\u00e5llit en triggerfunktion<\/a> som l\u00e5ter oss:<\/p>\n

\n

K\u00f6r alla hanterare och beteenden kopplade till de matchade elementen f\u00f6r den givna h\u00e4ndelsetypen.<\/p>\n<\/blockquote>\n

Men det var inte f\u00f6rr\u00e4n 1.3 som just den h\u00e4r funktionen blev betydligt mer anv\u00e4ndbar, \u00e5tminstone vad jag betr\u00e4ffar. Jag s\u00e4ger det eftersom det var d\u00e5 vi fick m\u00f6jligheten att definiera anpassade h\u00e4ndelser och sedan st\u00e4lla in hanterare f\u00f6r dem.<\/p>\n

Men vad \u00e4r ett troligt anv\u00e4ndningsfall d\u00e4r anpassade jQuery-h\u00e4ndelser \u00e4r anv\u00e4ndbara i WordPress-sammanhang? Av huvudet kanske du kan komma p\u00e5 m\u00e5nga. Eller kanske inte.<\/p>\n

Det har inte varit f\u00f6rr\u00e4n p\u00e5 sistone som jag har anv\u00e4nt dem betydligt mer \u00e4n vanligt. S\u00e5 jag t\u00e4nkte dela med mig av hur jag anv\u00e4nder dem om det \u00e4r av annan anledning \u00e4n att visa dig hur du kopplar upp dem till ditt arbete.<\/p>\n

Anpassade jQuery-h\u00e4ndelser<\/h2>\n

Om du har erfarenhet av JavaScript \u2013 vanilj eller inte \u2013 \u00e4r du f\u00f6rmodligen bekant med grundl\u00e4ggande h\u00e4ndelsehanterare. Det vill s\u00e4ga n\u00e4r n\u00e5gon klickar p\u00e5 ett element har vi en funktion inst\u00e4lld p\u00e5 att aktiveras som g\u00f6r n\u00e5got.<\/p>\n

Anpassade jQuery-h\u00e4ndelser \u00e4r ungef\u00e4r s\u00e5, f\u00f6rutom att det \u00e4r h\u00e4ndelser som vi definierar. Det betyder att vi inte beh\u00f6ver lita p\u00e5 n\u00e4r n\u00e5gon f\u00f6r musen \u00f6ver ett element eller n\u00e4r de klickar p\u00e5 ett element.<\/p>\n

Ist\u00e4llet kan vi utl\u00f6sa en h\u00e4ndelse och sedan ha en hanterare inst\u00e4lld f\u00f6r att svara p\u00e5 l\u00e4mpligt s\u00e4tt. H\u00e4r \u00e4r ett exempel.<\/p>\n

F\u00f6rbereder f\u00f6r ett anpassat event<\/h3>\n

L\u00e5t oss s\u00e4ga att du arbetar med ett projekt och det har en administrationssida som ansvarar f\u00f6r att h\u00e4mta data fr\u00e5n ett tredje parts API. Kontrollfl\u00f6det skulle se ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n

    \n
  1. Anv\u00e4ndaren klickar p\u00e5 en knapp,<\/li>\n
  2. En Ajax-f\u00f6rfr\u00e5gan initieras och beg\u00e4r information fr\u00e5n tredje part,<\/li>\n
  3. Medan beg\u00e4ran sker b\u00f6r knapparna p\u00e5 sk\u00e4rmen vara inaktiverade,<\/li>\n
  4. N\u00e4r beg\u00e4ran \u00e4r klar kan knapparna \u00e5teraktiveras,<\/li>\n
  5. Alternativt kan ett statusmeddelande skrivas till sk\u00e4rmen.<\/li>\n<\/ol>\n

    F\u00f6r att detta ska h\u00e4nda, f\u00f6rv\u00e4ntar den sig att det finns minst en knapp (som i ett inmatningselement<\/strong>) och ett valfritt textf\u00e4lt eller textomr\u00e5de<\/strong> d\u00e4r statusen f\u00f6r beg\u00e4ran kan ske.<\/p>\n

    N\u00e4r anv\u00e4ndaren klickar p\u00e5 h\u00e4ndelsen kan vi utl\u00f6sa en anpassad h\u00e4ndelse. Vi kan kalla denna h\u00e4ndelse acme.ajax.processing<\/strong>. Sedan kan vi sedan anv\u00e4nda den f\u00e4rdiga<\/a> funktionen som tillhandah\u00e5lls av jQuery f\u00f6r att hantera allt vi vill st\u00e4da upp efter\u00e5t eller s\u00e5 kan vi anv\u00e4nda v\u00e5r anpassade funktion om det \u00e4r n\u00e5got vi vill hantera i slutet ocks\u00e5.<\/p>\n

    F\u00f6r b\u00e5da dessa kommer vi att titta p\u00e5 b\u00e5da. S\u00e5 vi kommer ocks\u00e5 att ha ett event som heter acme.ajax.complete<\/strong>.<\/p>\n

    S\u00e5 vi \u00e4r bekymrade \u00f6ver:<\/p>\n