Evento non funzionante su elemento creato dinamicamente

Question

Mi sto tirando fuori i capelli cercando di capire perché l'evento mouseover non funziona con il gestore .on con un elemento creato dinamicamente da ajax. L'unica cosa che sembra funzionare è il codice con .live ma capisco che è deprecato.

$(".dropdown ul li").live("mouseover", function() { 
alert('mouseover works'); 
}); 

Tuttavia, quando provo utilizza .on, non funzionerà - non importa quello che provo variazioni (document.ready, .mouseover, etc etc)

$(".dropdown ul li").on("mouseover", function() { 
alert('mouseover works'); 
}); 

I gestori di eventi sono a il fondo del codice, quindi vengono eseguiti per ultimi. Qualcuno ha un'idea di cosa sto facendo male ??

Answer 1

Utilizzando .on per gli elementi appena generato con dinamica delegazione eventohttp://api.jquery.com/on/ - dove il vostro selettore principale è un esistente genitore statica:

$(".static-parent").on("event1 event2", ".dynamic-child", function() { 

o nel tuo caso:

$(".dropdown").on("mouseover", "li", function() { 
    alert('mouseover works!!!!!!!!!'); 
}); 

Gli eventi delegati hanno il vantaggio di poter elaborare eventi da discendenti el ementi 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.

assicurarsi di utilizzare un DOM pronto funzione

jQuery(function($) { // DOM is now ready and $ alias secured 

    $(".dropdown").on("mouseover", "li", function() { 
     alert('mouseover works!!!!!!!!!'); 
    }); 

});