L’evento Click non funziona sugli elementi generati dynamicmente

    $(document).ready(function() { $("button").click(function() { $("h2").html("

click me

") }); $(".test").click(function(){ alert(); }); });

Stavo cercando di generare un nuovo tag con il test nome della class in

facendo clic sul pulsante. Ho anche definito un evento click associato al test . Ma l’evento non funziona.

Qualcuno può aiutare?

Il click() che stai usando è chiamato un binding “diretto” che collegherà il gestore solo ad elementi già esistenti . Non sarà vincolato agli elementi creati in futuro. Per fare ciò, dovrai creare un bind “delegato” usando on() .

Gli eventi delegati hanno il vantaggio di poter elaborare eventi da elementi discendenti che vengono aggiunti al documento in un secondo momento.

fonte

Ecco cosa stai cercando:

 var counter = 0; $("button").click(function() { $("h2").append("

click me " + (++counter) + "

") }); // With on(): $("h2").on("click", "p.test", function(){ alert($(this).text()); });
  

Utilizza il metodo .on() con eventi delegati

 $('#staticParent').on('click', '.dynamicElement', function() { // Do something on an existent or future .dynamicElement }); 

Il metodo .on() consente di debind qualsiasi gestore di eventi desiderato a:
elementi attuali o elementi futuri aggiunti al DOM in un secondo momento.

PS: non usare .live() ! Da jQuery 1.7+ il metodo .live() è deprecato.

Ragionare:

In jQuery, Click () – allega il gestore di eventi solo se l’elemento esiste già nel codice html.

Non considererà il nuovo elemento che viene creato dynamicmente (elemento Future) dopo che la pagina è stata caricata.

Gli elementi dinamici sono creati con l’aiuto di javascript o jquery (non in html) .

Quindi l’evento click non si triggers.

Soluzione:

Per superare questo dovremmo usare la funzione on () .

le funzioni delegate (), live () e on () hanno i vantaggi rispetto agli elementi DOM.

on può triggersre sia elementi esistenti che elementi futuri.

su può considerare gli elementi che sono tutti presenti in tutta la pagina.

le funzioni delegate (), live () sono deprecate (non usarle).

È necessario utilizzare sulla funzione per triggersre l’evento su elementi (futuri) creati in modo dinamico.

Rimuovi il codice da $ (documento) .ready:

 $(".test").click(function(){ alert(); }); 

Cambiare in:

 $(document).on('click','.test',function(){ alert('Clicked'); }); 

Modificare

  $(".test").click(function(){ 

A

  $(".test").live('click', function(){ 

DIMOSTRAZIONE DAL VIVO

jQuery .live()

Devi usare .live per far funzionare tutto questo:

 $(".test").live("click", function(){ alert(); }); 

o se stai usando jquery 1.7+ usa .on:

 $(".test").on("click", "p", function(){ alert(); }); 

Aggiungi questa funzione nel tuo file js. Funzionerà su tutti i browser

 $(function() { $(document).on("click", '#mydiv', function() { alert("You have just clicked on "); }); }); 
  
Div

Prova .live() o .delegate()

http://api.jquery.com/live/

http://api.jquery.com/delegate/

Il .test elemento .test stato aggiunto dopo il metodo .click() , quindi non ha avuto l’evento collegato ad esso. Live e Delegata danno quell’triggerszione dell’evento a elementi padre che controllano i propri figli, quindi qualsiasi cosa aggiunta in seguito funziona ancora. Penso che Live controllerà l’intero corpo del documento, mentre il Delegato può essere assegnato a un elemento, quindi Debind è più efficiente.

Ulteriori informazioni:

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

Ho trovato due soluzioni nella documentazione di jQuery:

Primo: utilizzare il delegato sul corpo o sul documento

Per esempio:

  $("body").delegate('.test', 'click', function(){ ... alert('test'); }); 

Perché?

Risposta: associare un gestore a uno o più eventi per tutti gli elementi che corrispondono al selettore, ora o in futuro, in base a un set specifico di elementi radice. link: http://api.jquery.com/delegate/

Secondo: Metti la tua funzione nel “$ (documento)” , usando “on” e collegalo all’elemento che vuoi triggersre. Il primo parametro è il “gestore di eventi”, il secondo: l’elemento e il terzo: la funzione. Per esempio:

  $( document ).on( 'click', '.test', function () { ... alert('test'); }); 

Perché?

Risposta: I gestori di eventi sono associati solo agli elementi attualmente selezionati; devono esistere nella pagina nel momento in cui il tuo codice effettua la chiamata a .on () . Per garantire che gli elementi siano presenti e possano essere selezionati, eseguire il binding degli eventi all’interno di un gestore pronto per il documento per gli elementi presenti nel markup HTML sulla pagina. Se il nuovo codice HTML viene iniettato nella pagina, selezionare gli elementi e associare i gestori di eventi dopo che il nuovo codice HTML è stato inserito nella pagina. In alternativa, utilizza eventi delegati per colbind un gestore di eventi, come descritto di seguito … link: https://api.jquery.com/on/

Il modo migliore per applicare l’evento ai contenuti generati dynamicmente mediante la delega.

 $(document).on("eventname","selector",function(){ // code goes here }); 

quindi il tuo codice è così ora

 $(document).on("click",".test",function(){ // code goes here }); 
 $(.surrounding_div_class).on( 'click', '.test', function () { alert( 'WORKS!' ); }); 

Funzionerà solo se il DIV con la class .surrounding_div_class è il genitore immediato dell’object. Test

Se c’è un altro object nel div che verrà riempito, non funzionerà.

Il problema è che stai tentando di associare la class “test” all’evento prima che ci sia qualcosa con una class “test” nel DOM . Sebbene possa sembrare che tutto questo sia dinamico, ciò che sta realmente accadendo è che JQuery fa un passaggio sul DOM e collega l’evento click quando viene ready() funzione ready() , che accade prima di aver creato il “Click Me” nel tuo evento button .

Aggiungendo l’evento Click “test” al gestore di clic “button”, lo collegherà dopo che l’elemento corretto esiste nel DOM .

  

Usare live() (come altri hanno sottolineato) è un altro modo per farlo, ma ho anche ritenuto opportuno segnalare l’errore minore nel codice JS. Quello che hai scritto non era sbagliato, doveva solo essere correttamente esaminato. Afferrare come funzionano DOM e JS è una delle cose complicate per molti sviluppatori tradizionali.

live() è un modo più pulito per gestirlo e nella maggior parte dei casi è la strada giusta da percorrere. Essenzialmente sta guardando il DOM e rielabora le cose ogni volta che cambiano gli elementi al suo interno.

La funzione .live funziona alla grande.

È per gli elementi aggiunti dynamicmente allo stage.

 $('#selectAllAssetTypes').live('click', function(event){ alert("BUTTON CLICKED"); $('.assetTypeCheckBox').attr('checked', true); }); 

Saluti, Ankit.

Il Jquery. Funziona bene, ma ho avuto qualche problema con il rendering che implementa alcune delle soluzioni sopra. Il mio problema con l’uso di .on è che in qualche modo stava rendendo gli eventi diversamente dal metodo .hover .

Solo fyi per chiunque altro possa avere il problema. Ho risolto il mio problema registrando nuovamente l’evento hover per l’elemento aggiunto dynamicmente:

registrare nuovamente l’evento hover perché il passaggio del mouse non funziona per gli elementi creati dynamicmente. quindi ogni volta che creo il nuovo elemento dinamico aggiungo di nuovo il codice hover. funziona perfettamente

 $('#someID div:last').hover( function() { //... }, function() { //... } ); 

Non potevo vivere o debind a lavorare su un div in un lightbox (minuscolo).

Ho usato setTimeout con successo, nel seguente modo semplice:

 $('#displayContact').click(function() { TINY.box.show({html:'
Submit
', close:true}); setTimeout(setContactClick, 1000); }) function setContactClick() { $('#contactSubmit').click(function() { alert($('#contactText').val()); }) }

Inoltre puoi usare onclick="do_something(this)" all’interno dell’elemento

Un’alternativa alternativa più succinta (IMHO) consiste nell’utilizzare una funzione javascript raw che risponde a un evento on-click, quindi restituire l’elemento target a jQuery se lo si desidera. Il vantaggio di questo approccio è che puoi aggiungere dynamicmente il tuo elemento ovunque, e il gestore dei clic funzionerà, e non dovrai preoccuparti di debind il controllo agli elementi parent e così via.

Passaggio 1: aggiorna l’html dinamico per triggersre un evento onclick. Assicurati di passare l’object “evento” come argomento


     $ ("button"). click (function () {
         $ ("h2"). html ("

onclick = 'test (evento)' > clic me ") });

Passaggio 2: creare la funzione di test per rispondere all’evento click


     test funzionale (e) {
         mettere in guardia();
     });

Passaggio facoltativo 3: Dato che stai usando jQuery, suppongo che sarà utile per ottenere un riferimento al pulsante sorgente


     test funzionale (e) {
         mettere in guardia();

         // Ottieni un riferimento al pulsante
         // Una spiegazione di questa linea è disponibile qui
         var target = (e.target)?  e.target: e.srcElement;

         // Passa il riferimento del pulsante a jQuery per eseguire jQuery magic
         var $ btn = $ (objective);

     });

Sto lavorando con le tabelle aggiungendo nuovi elementi dynamicmente a loro, e quando si utilizza on (), l’unico modo per farlo funzionare per me è usare un genitore non dinamico come:

  // Dynamically created  // Dynamically created  // Dynamically created 

Questo è veramente utile perché, per rimuovere eventi associati a on () , puoi usare off () , e per usare gli eventi una volta, puoi usare uno () .

È ansible aggiungere al clic per creare elementi dynamicmente. Esempio di seguito. Usare un Quando per assicurarsi che sia fatto. Nel mio esempio, sto afferrando un div con la class expand, aggiungendo un “click per vedere più” span, quindi usando quella span per hide / mostrare il div originale.

 $.when($(".expand").before("Click to see more")).then(function(){ $(".clickActivate").click(function(){ $(this).next().toggle(); }) }); 

Se hai un link aggiunto dynamicmente ad un contenitore o al corpo:

 var newLink= $("", { "id": "approve-ctrl", "href": "#approve", "class": "status-ctrl", "data-attributes": "DATA" }).html("Its ok").appendTo(document.body); 

puoi prendere il suo elemento javascript raw e aggiungere un listener di eventi ad esso, come il clic :

 newLink.get(0).addEventListener("click", doActionFunction); 

Indipendentemente dal numero di volte in cui aggiungi questa nuova istanza di collegamento, puoi utilizzarla come se stessi utilizzando una funzione di click jquery.

 function doActionFunction(e) { e.preventDefault(); e.stopPropagation(); alert($(this).html()); } 

Quindi riceverai un messaggio che dice

Va bene

Ha prestazioni migliori rispetto ad altre alternative.

Extra : puoi ottenere prestazioni migliori evitando jquery e usando javascript semplice. Se si utilizza IE fino alla versione 8, è necessario utilizzare questo polyfill per utilizzare il metodo addEventListener

 if (typeof Element.prototype.addEventListener === 'undefined') { Element.prototype.addEventListener = function (e, callback) { e = 'on' + e; return this.attachEvent(e, callback); }; } 

Usa ‘on’ quando il clic si lega agli elementi già presenti.

Per es

 $('test').on('click',function(){ alert('Test'); }) 

Questo aiuterà.