jQuery non può selezionare l'elemento dopo il caricamento Ajax

Question

Dopo molte ricerche non ho trovato risposta. Sto usando il tema wordpress Twenty Twelve e sembra caricare pagine tramite richieste Ajax. Ho un pulsante (# header-navigation-link) che mostra e nasconde un altro elemento sulla mia pagina. Funziona sul caricamento della prima pagina senza chiamate jax, ma quando navigo in un'altra pagina viene caricato da ajax e il mio programma non riesce più a trovare # nav-mobile-wrapper.

 $(document).on('click', "#header-navigation-link", function() { 

     $(document).find("#nav-mobile-wrapper").fadeToggle(); 
     alert('Success!'); 
    }); 

Nelle pagine tutte le Ajax caricato l'avviso schiocca sempre, quindi è trovare il pulsante, non solo l'elemento per mostrare e nascondere. Ho anche provato a scambiarli, quindi fai clic su # nav-mobile-wrapper per attivare # header-navigation-link, e la stessa cosa accade solo vice versa.

Cosa mi manca per target # nav-mobile-wrapper in questa funzione?

Grazie a tutti coloro che possono aiutare!

Answer 1

Se si conosce l'ID, non è necessario trovarlo di nuovo, basta selezionarlo.

$(document).on('click', "#header-navigation-link", function() {  
     $("#nav-mobile-wrapper").fadeToggle(); 
     alert('Success!'); 
    }); 

Answer 2

Questo elemento ("# nav-mobile-wrapper") è anche generato da ajax? In tal caso, assicurati che la funzione di clic e il luogo in cui viene generato questo elemento si trovino nello stesso "ambito". Per esempio:

$(document).ready(function() { 
     $.ajax({ 
     // this is where you send the ajax request to server 
     {).done(function(response){ 
     //because you said, it loaded page via ajax request, so page's loading and #nav-mobile-wrapper's generating probably happened here 
     // If so, try put your click function here, inside the 'done' block! 
     &(document).on('click',"#header-navigation-link",function(){ 
     // your stuff 
    }); 
    }) 

Credo che il motivo per cui la funzione non funziona è semplicemente perché non riesce a trovare l'elemento # nav-mobile-wrapper. Senza il tuo codice questa è la migliore ipotesi che posso avere. Ad ogni modo, fammi sapere se hai ancora questo problema.

BTW, penso

$("#header-navigation-link").on('click',function(){ 
// you code 
}); 

è un modo più semplice per scrivere e leggere :)