whatsapp
keyboard_arrow_down Contatti

Mercoledì

30

Agosto 2023

Errore event listener ("click") non funziona con Ajax

Errore event listener (“click”) non funziona con Ajax

  1. blog Errore event listener (“click”) non funziona con Ajax
event_available
schedule

Come risolvere l’errore dell’event listener (“click”) che non funziona con Ajax? Se il tuo sito web utilizza una funzione che aggiorna il contenuto della pagina è molto probabile che gli eventi vengano rimossi.

Non preoccuparti, questo tipo di errore si risolve di solito modificando una piccola parte del tuo codice jQuery.

Il problema principale è questo: se rimuovi un elemento della pagina per sostituirlo con uno nuovo, generato da Ajax, gli event listener si sganciano da esso.

code

Come risolvere l’errore event listener (“click”) non funziona con Ajax

La soluzione consiste nell’agganciare gli eventi direttamente al DOM, attraverso la funzione $(document), come nell’esempio.

Sostituisci questo codice

$('input.my-class').on("click", function() {
  //code
});

Con questo:

$(document).on("click", 'input.my-class', function() {
  //code
});

In questo modo, agganciando gli event listener direttamente all’oggetto $(document), potrai sostituire qualsiasi elemento della pagina senza perdere gli eventi ad esso agganciati.

Se hai problemi con l’errore $ is not a function puoi risolverlo seguendo le indicazioni della guida che ho scritto per te.

Fai attenzione ovviamente a impostare la stessa classe del vecchio elemento al nuovo e il gioco è fatto!

Puoi anche agganciare più event listener alla stessa classe come nell’esempio qui sotto:

$(document).on("keyup keypress blur change click", 'input.my-class', function() {
  //code
});

Questo errore, normalmente, si può anche risolvere agganciando gli eventi listener ad un qualsiasi altro elemento che non cambia con la funzione Ajax, ad esempio al body. È comunque consigliabile agganciare tutti gli eventi all’oggetto $(document) per no creare conflitti.

$(‘body’).on("click", 'input.my-class', function() {
  //code
});

Oppure come nell’esempio qui sotto:

$(‘.element-not-changed’).on("click", 'input.my-class', function() {
  //code
});

Ti è piaciuto questo articolo?

favorite thumb_down
Autore articolo

Fabio

Sono un terribile realista. Pratico e determinato ma anche un grande sognatore, ecco perché do continuamente vita a nuovi progetti online e non. Nel 2019 ho fondato Eureka Web proprio per rendere possibile tutto questo. Insieme possiamo realizzare la tua idea!


Visita il sito
library_books

Leggi anche

Come inviare dati dei form con Ajax serialize() a php
Scopri
Come usare le chiavi API Google
Scopri
Come unire file Javascript e CSS in WordPress
Scopri

Contattami

perm_identity
alternate_email
phonelink_ring
message

Il tuo messaggio è stato inviato con successo!
Ti risponderemo a breve

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

message
perm_identity
alternate_email

keyboard_arrow_up