Comment utiliser jQuery bind ou addEventListener dans des tableaux?

Question

Je veux obtenir la valeur de l'entrée radio vérifiée sur chaque flou ou claquement ou événement de mise au point des entrées radio.

function getCheckedVal(){ 
    var checked = $('#education_number input:radio:checked') 
    console.log(checked.val()); 
}; 

Ce ne sont pas des œuvres:

window.onload = function(){ 
    var radio = $('#education_number input:radio'); 
    for(var i=0; i<radio.length; i++){ 
     radio[i].addEventListener('blur', function(){getCheckedVal()}); 
     }; 
    } 

Et voici déclencher une exception:

window.onload = function(){ 
    var radio = $('#education_number input:radio'); 
    for(var i=0; i<radio.length; i++){ 
     radio[i].bind('blur', getCheckedVal()); 
     }; 
    } 

Uncaught TypeError: Object #HTMLInputElement has no method 'bind'

Comment faire cela?

Answer 1

Dans votre second exemple, vous êtes en appelantgetCheckedVal, puis en transmettant sa valeur de retour à bind. Vous ne voulez pas les () après getCheckedVal:

window.onload = function(){ 
    var radio = $('#education_number input:radio'); 
    for(var i=0; i<radio.length; i++){ 
     $(radio[i]).bind('blur', getCheckedVal); 
    } 
} 

(Note I ajouté $(...) autour radio[i], parce que radio[i] est un élément DOM brut, pas un objet jQuery.)

Mais vous pouvez simplifier considérablement ce code :

window.onload = function(){ 
    $('#education_number input:radio').blur(getCheckedVal); 
} 

jQuery est très basé sur les ensembles. Vous pouvez opérer sur tout l'ensemble des éléments correspondants, plutôt que de boucler vous-même l'ensemble.

Deux choses à considérer, bien que:

• -vous vraiment veulent que cette information sur le flou? Pas sur change, par exemple?
• Voulez-vous vraiment attendre l'événement window#load pour connecter vos gestionnaires d'événements? C'est très tard dans le processus de chargement de la page, après toutes vos images et ont terminé chargement. Plutôt que d'utiliser window#load, considérez soit de placer votre script à la fin, juste avant la balise de fermeture </body>, soit d'utiliser le ready function de jQuery.

Answer 2

bind est une méthode jQuery, mais tout ce que vous avez à ce stade est un HTMLInputElement - heureusement, vous pouvez passer un élément à jQuery et avoir accès à toutes ses fonctionnalités:

Change:

radio[i].bind('blur', getCheckedVal()); 

à

$(radio[i]).bind('blur', getCheckedVal); 

Vous devez également supprimer les parenthèses de getCheckedVal - passant getCheckedVal() à bind provoquera l'évaluation immédiate de la fonction et seule la valeur de retour sera liée à votre événement. Au lieu de cela, vous devez passer la référence de la fonction à bind.

Answer 3

Il est juste:

$('#education_number input:radio').bind('blur', getCheckedVal); 

Notez le manque () après getCheckedVal. Vous devez passer une référence à la fonction, pas appeler la fonction.

Je recommande de lire l'un des jQuery tutorials, pour apprendre les bases.

Un grand avantage de jQuery est qu'il vous permet d'effectuer facilement des actions sur une collection d'éléments HTML. $('selector') renvoie toujours un objet jQuery pour que vous puissiez en profiter. Si vous aviez un tableau pur d'éléments DOM, alors oui, vous devriez les parcourir et lier individuellement le gestionnaire d'événements.