Logic bug: $('.btn').click() does not trigger on elements injected into DOM after initial page load – jQuery EVENT_DYNAMIC_ELEMENTS_FAIL

EVENT_DYNAMIC_ELEMENTS_FAIL

Associare eventi direttamente con '$(".btn").on("click", ...)' collega il listener solo ai nodi DOM già esistenti al momento dell'esecuzione; per elementi aggiunti successivamente tramite AJAX occorre usare la delegazione: '$(document).on("click", ".btn", ...)'.

Cosa significa questo errore?

Associare eventi direttamente con '$(".btn").on("click", ...)' collega il listener solo ai nodi DOM già esistenti al momento dell'esecuzione; per elementi aggiunti successivamente tramite AJAX occorre usare la delegazione: '$(document).on("click", ".btn", ...)'.

Messaggio originale

Logic bug: $('.btn').click() does not trigger on elements injected into DOM after initial page load

Contesto e parole chiave

Alias

  • jQuery click not working on dynamic elements

Messaggi alternativi

  • evento click non scatta su elementi aggiunti dinamicamente

Prodotti

  • jQuery Library (v1.x, v2.x, v3.x, v4.x)

Piattaforme

  • Linux
  • macOS
  • Qualsiasi Browser Web
  • Windows

Parole chiave

  • ajax
  • errore-jquery-on-click-dynamic-elements-not-working
  • Eventi e Listener
  • javascript
  • jquery
  • jquery.eventi.on-click-not-working-on-dynamically-added-elements

Cause possibili

Causa tecnica per Errore jQuery: Event Listener Non Funziona su Elementi Generati Dinamicamente

Associare eventi direttamente con '$(".btn").on("click", ...)' collega il listener solo ai nodi DOM già esistenti al momento dell'esecuzione; per elementi aggiunti successivamente tramite AJAX occorre usare la delegazione: '$(document).on("click", ".btn", ...)'.

molto comune

Diagnosi

Diagnostica DOM o AJAX per Errore jQuery: Event Listener Non Funziona su Elementi Generati Dinamicamente

Verificare lo stato della variabile window.jQuery nella Console DevTools (F12) e ispezionare il tab Network per le chiamate AJAX.

Come leggere il risultato. Restituisce la versione attiva di jQuery e il numero effettivo di nodi DOM corrispondenti al selettore.

terminal
console.log(jQuery.fn.jquery); console.log($('.my-element').length);

Risoluzione

Risoluzione standard per Errore jQuery: Event Listener Non Funziona su Elementi Generati Dinamicamente

Difficoltà: facileRischio: basso

Applicare la correzione al codice o alla configurazione degli script jQuery nel frontend.

  1. Ispezionare la riga segnalata nella console del browser
  2. Correggere il selettore CSS, il passaggio dei parametri o la delegazione con .on()
  3. Ricaricare la pagina con cache svuotata (Ctrl+F5) per verificare la risoluzione

Domande frequenti

Come risolvere l'errore Errore jQuery: Event Listener Non Funziona su Elementi Generati Dinamicamente in jQuery?

Associare eventi direttamente con '$(".btn").on("click", ...)' collega il listener solo ai nodi DOM già esistenti al momento dell'esecuzione; per elementi aggiunti successivamente tramite AJAX occorre usare la delegazione: '$(document).on("click", ".btn", ...)'.

Approfondimenti

Schede correlate