2013-08-01 17 views
6

Sto cercando di utilizzare una classe (question) che verrà allegata in ogni elemento dell'array, il ciclo funziona correttamente. Il mio problema è quando si tenta di utilizzare la classe in jQuery non succede nulla, è come se non ci fosse ...La classe personalizzata in un ciclo di array non funziona

Sono consapevole che Angular aggiunge classi ng-scope e ng-binding, questo potrebbe impedire a jQuery forse?

Quando controllo il DOM non ci sono errori e la mia classe è lì, non funzionerà!

Ecco il mio codice: HTML

<p ng-repeat="n in ['Human or Lemar King?','Name of your tribe?','Can you Boogie?'] | filter:query" class="question"> {{n}}</p> 

jQuery

$(function() { 
    $(".question").on('click',function() { 
    alert("Ohh hail King Julien!") 
    });  
}); 

risposta

3

Si sta cercando di impostare un gestore di eventi su elementi che non si trovano nella struttura DOM ancora.

Si può andare modo angolare e aggiungere ng-click:

<p ng-click="doSomething()" ng-repeat="n in ['Human or Lemar King?','Name of your tribe?','Can you Boogie?'] | filter:query" class="question"> {{n}}</p> 

Oppure si può impostare un evento in diretta su <body> (o su un genitore più da vicino l'elemento che è presente nel DOM):

$(function() { 
    $('body').on('click', '.question', function() { 
    alert("Ohh hail King Julien!") 
    });  
}); 
+0

Vedo ... ma '$ (function() {...});' dice di eseguire lo script quando DOM è pronto o lo sto fraintendendo? –

+2

Quando il DOM è pronto, Angular inizia a fare la sua magia, che fa routing e roba del controller. Quindi i tuoi $() s vengono eseguiti prima che Angular abbia viste sostituite! Se ti trovi in ​​un'app Angular, ti consiglio vivamente di utilizzare 'ng-click' per questo! –

+0

@stevuu ha senso ora. Grazie. –

Problemi correlati