jQuery on() non funziona su già aggiunto elementi DOM

Question

ho questo:

$(document).on("click", ".prev", function(){ 
    $(this).closest("div").find(".slider").animate({ 
     "left": "+=450px" 
    }, 800, "easeInOutBack"); 
    return false; 
}); 

che funziona quando vengono aggiunti nuovi elementi al DOM, ma non funziona per gli elementi che sono già in il DOM.

quando faccio questo:

$(".prev").on("click", function(){ 
    $(this).closest("div").find(".slider").animate({ 
     "left": "+=450px" 
    }, 800, "easeInOutBack"); 
    return false; 
}); 

Si lavora per gli elementi del DOM, ma non nuove aggiunte al DOM. C'è un modo per far sì che funzioni per entrambi senza che io debba scrivere questo 2 volte o effettuare una chiamata a un'altra funzione?

Ecco uno screenshot:

Quindi, ecco una più approfondita descrizione di come funziona.

<div id="simple-pevs" style="padding-right: 20px;"> 
    <?php require_once __DIR__ . "/data/get/PEVSection.php"; ?> 
</div> 

poi, quando qualcuno vuole aggiungere un'altra sezione fanno clic sul pulsante Aggiungi che poi viene eseguito questo codice:

$(".add-another-pev").click(function(){ 
     $.get("./data/get/PEVSection.php?pev="+pevGroup, function(data){ 
      $("#simple-pevs").append(data); 
     }); 
     pevGroup++; 
     return false; 
    }); 

Come si può vedere che sta chiamando lo stesso che è stato pre-caricato in il php. La nuova opera (e tutti gli altri quelli aggiuntivi aggiunto) con l'evento click e il pugno non fa

@ArunPJohny

console.log($(".prev")); dopo l'aggiunta di un nuovo elemento:

[a.prev, a.prev, prevObject: b.fn.b.init[1], context: document, selector: ".prev", jquery: "1.9.1", constructor: function…] 
0: a.prev 
1: a.prev 
context: #document 
length: 2 
prevObject: b.fn.b.init[1] 
selector: ".prev" 
__proto__: Object[0] 

Answer 1

No, se crei nuovi elementi come questo, devi riassociare il gestore di eventi.

function bindHandler() { 
    $(document).on("click", ".prev", function(){ 
     $(this).closest("div").find(".slider").animate({ 
      "left": "+=450px" 
     }, 800, "easeInOutBack"); 
     return false; 
    }); 
} 
bindHandler(); 

$(".add-another-pev").click(function(){ 
    $.get("./data/get/PEVSection.php?pev="+pevGroup, function(data){ 
     $("#simple-pevs").append(data); 
    }); 
    pevGroup++; 

    bindHandler(); 
    return false; 
}); 

Answer 2

Di seguito si riporta il contenuto che ho copiato dal sito ufficiale Jquery, può spiegare molto chiaramente: I gestori di eventi sono legati 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 inserito nella pagina, selezionare gli elementi e associare i gestori di eventi dopo che il nuovo codice HTML è stato inserito nella pagina. In alternativa, utilizzare gli eventi delegati per collegare un gestore di eventi, come descritto di seguito.

Gli eventi delegati hanno il vantaggio di poter elaborare eventi da elementi discendenti che vengono aggiunti al documento in un secondo momento. Selezionando un elemento che è garantito sia presente nel momento in cui il gestore eventi delegato è collegato, è possibile utilizzare gli eventi delegati per evitare la necessità di collegare e rimuovere frequentemente gestori di eventi. Questo elemento potrebbe essere l'elemento contenitore di una vista in un progetto Model-View-Controller, ad esempio, o documentare se il gestore eventi desidera monitorare tutti gli eventi bubbling nel documento. L'elemento del documento è disponibile nella parte iniziale del documento prima di caricare qualsiasi altro codice HTML, quindi è possibile allegare eventi senza attendere che il documento sia pronto.

Oltre alla loro capacità di gestire eventi su elementi discendenti non ancora creati, un altro vantaggio degli eventi delegati è il loro potenziale per un sovraccarico molto più basso quando molti elementi devono essere monitorati. Su una tabella di dati con 1000 righe nella sua tbody, questo viene associato un gestore a 1.000 elementi:

$("#dataTable tbody tr").on("click", function(event){ 
alert($(this).text()); 
}); 

Un approccio-events delegati attribuisce un gestore di eventi a un solo elemento, il tbody, e l'evento deve solo bolla di un livello (dal TR cliccato per tBODY):

$("#dataTable tbody").on("click", "tr", function(event){ 
alert($(this).text()); 
}); 

Nota: gli eventi delegati non funzionano per SVG.

http://api.jquery.com/on/