Affectation de fonction onclick dynamique avec paramètres dynamiques en JavaScript?

Question

J'ai ce code:

document.getElementById('img'+i).onclick = function(){popup_show('popup',array_msg[i]+'|||'+date('Y-m-d',strtotime(lec_date))+'-==-'+str_view_forConflict, 'AddEditSchedule;;popup_drag2;;EditSched;;'+String(array_msg_id[3])+';;view', 'popup_drag', 'popup_exit', 'screen-center', 0, 0);}; 

... mais quand je clique sur l'image, les données de array_msg[i] est les dernières données de la boucle, ce qui signifie l'indice est la longueur de la boucle. J'utilise IE pour cela.

S'il vous plaît donnez-moi une idée sur la façon de faire cela. En FF, cela fonctionne bien car j'utilise setAttribute.

@bobince

document.getElementById('img'+i).onclick= popup_show.bind(window, 'popup',array_msg[i]+'|||'+date('Y-m-d',strtotime(lec_date))+'-==-'+str_view_forConflict,'AddEditSchedule;;popup_drag2;;EditSched;;'+array_msg_id[3]+';;view','popup_drag', 'popup_exit', 'screen-center', 0, 0 ); 
       if (!('bind' in Function.prototype)) { 
        Function.prototype.bind= function(owner) { 
         var that= this; 
         var args= Array.prototype.slice.call(arguments, 1); 
         return function() { 
          return that.apply(owner, 
           args.length===0? arguments : arguments.length===0? args : 
           args.concat(Array.prototype.slice.call(arguments, 0)) 
          ); 
         }; 
        }; 
       } 

Answer 1

Treby, ceci est la version nettoyée de votre réponse. La fonction anonyme anonyme supplémentaire que vous avez ajoutée n'est pas nécessaire.

for (var i = 0, l = array.length; i < l; i++) { 
    document.getElementById(i + '05').onclick = (function(tmp) { 
    return function() { 
     popup_show(
     "popup", 
     array_msg[tmp] + '|||' + date('Y-m-d', strtotime(lec_date)) + '-==-' + str_view_forConflict, 
     "AddEditSchedule;;popup_drag2;;EditSched;;" + String(array_msg_id[3]) + ";;view", 
     "popup_drag", "popup_exit", "screen-center", 0, 0 
    ); 
    }; 
    })(i); 
} 

Modifié pour fixer problème de fermeture

Answer 2

Vous devez utiliser un closure. Il serait utile si vous avez fourni le code de boucle ainsi que le code qui est exécuté dans la boucle, mais en supposant que vous avez une boucle for norme itérer un tableau, le code devrait fonctionner:

for (var i = 0, l = array.length; i < l; i++) 
{ 
    (function(i) { 
     document.getElementById("img" + i).addEventListener("click", function() { 
      popup_show("popup", array_msg[i] + "|||" + date("Y-m-d", strtotime(lec_date)) + "-==-" + str_view_forConflict, "AddEditSchedule;;popup_drag2;;EditSched;;" + String(array_msg_id[3]) + ";;view", "popup_drag", "popup_exit", "screen-center", 0, 0); 
     }, false); 
    })(i); 
} 

En outre, vous ne devrait pas utiliser setAttribute dans Firefox. Au lieu de cela, utilisez element.onclick ou, de préférence, element.addEventListener, ce qui vous permet d'ajouter plusieurs fonctions à appeler lorsqu'un événement se déclenche et donc cela joue bien avec un autre code (si deux bits de code assignent une fonction à, disons, un événement click dans le forme element.onclick = function() { ..., puis la deuxième affectation remplace la première - pas bon). J'ai utilisé element.addEventListener dans mon exemple de code ci-dessus.

Answer 3

Vous avez rencontré le problème de fermeture de variable de boucle. C'est un gotcha très commun dans les langages de style C avec des fermetures, telles que JavaScript et Python. Voir la réponse acceptée de this question pour une solution impliquant la liaison des variables de boucle dans une seconde fermeture.

Un peu moins de solution imbriquée est d'utiliser function.bind():

for (var i= 0; i<something.length; i++) { 
    document.getElementById('img'+i).onclick= popup_show.bind(window, 'popup', 
     array_msg[i]+'|||'+date('Y-m-d',strtotime(lec_date))+'-==-'+str_view_forConflict, 
     'AddEditSchedule;;popup_drag2;;EditSched;;'+array_msg_id[3]+';;view', 
     'popup_drag', 'popup_exit', 'screen-center', 0, 0 
    ); 
} 

cependant, puisque cette méthode est une ECMAScript cinquième édition fonction non prise en charge par la plupart des navigateurs mais il a besoin d'un peu d'aide - voir le fond de this answer pour une mise en œuvre rétrocompatible.

Answer 4

Fermetures. Vous devez utiliser JavaScript Closures. Voir si les réponses à this question aident.

Answer 5

travail Réponse:

var closures = []; 
for (var i = 0; i < array.length; i++){ 
    closures[i] = (function(tmp) { 
     return function() { 
     document.getElementById(tmp + '05').onclick = function(){popup_show("popup", array_msg[tmp]+'|||'+date('Y-m-d',strtotime(lec_date))+'-==-'+str_view_forConflict, "AddEditSchedule;;popup_drag2;;EditSched;;"+ String(array_msg_id[3]) +";;view", "popup_drag", "popup_exit", "screen-center", 0, 0)}; 
     }; 
})(i); 

    closures[i](); 
} 

Merci à Steve Harrison réponse. J'ai eu une idée pour l'emballer