Ajouter une fonction dynamique à un élément en utilisant jQuery

Question

Je suis en train d'attacher une fonction .change() dynamique à une liste d'éléments:

els = new Array('#element1','#element2'); 

for (i=1; i < 3; i++){ 
    $(els[i]).change(function(){ 
     alert(i); 
    }); 
} 

Cela ne fonctionne pas comme on le souhaite, car i n'est pas passé dans la fonction, mais est toujours égal à la dernière itération, c'est à dire, 2. Comment puis-je passer une valeur dans le change(function{})?

Answer 1

Deux façons de le faire.

Utilisez $.each

var element_array = new Array('#element1','#element2'); 

$.each(element_array, function(index, value){ 
    $(value).change(function(){ 
     alert(index); 
    }); 
}); 

Créer une fermeture.

var element_array = new Array('#element1','#element2'); 

for (i = 0; i < element_array.length; i++){ 
    (function(i){ 
     $(element_array[i]).change(function(){ 
      alert(i); 
     }); 
    })(i); 
} 

Answer 2

Toutes vos fonctions générées se réfèrent à la même variable: i. Cette variable change par la suite lorsque la boucle continue, de sorte qu'au moment où l'événement de changement se déclenche, i est défini sur 2.

Vous devez créer une portée locale qui stocke la valeur de i au moment de votre fonction est en cours de création:

els = new Array('#element1','#element2'); 

for (i=1; i < 3; i++){ 
    (function(i){ 
     $(els[i]).change(function(){ 
      alert(i); 
     }); 
    })(i); 
} 

Answer 3

événements jQuery peuvent prendre EventData dans le signiture et passer comme arguments à votre fonction de rappel . A partir de docs jQuery:

.change([eventData], handler(eventObject)) 

Ce que vous voulez est ce (j'ai changé le nom de arg pour le garder évident):

for (i=1; i < 3; i++){ 
    $(els[i]).change({index: i}, function(event){ 
     alert(event.data.index); 
    }); 
} 

Answer 4

Avez-vous essayé quelque chose comme ça:

els = new Array ('# element1', '# element2');

for (i=1; i < 3; i++){ $(els[i]).bind('change', function(){ alert(i); }); }

Lorsque vous chargez la page, jQuery ne connaît pas les valeurs du tableau et il est comme une chaîne.