jQuery Girl
  1. jQuery Girl
  3. Utilisez Javascript / JQuery pour créer dynamicment plusieurs boutons HTML avec différents gestionnaires d’événements de clic
Intereting Posts
Le moyen le plus simple d’obtenir l’index actuel dans le modèle jQuery Ajax.BeginForm n’appelle pas onSuccess Attacher un événement de clic à plusieurs éléments à la fois? jQuery ne renvoie que le premier object par le sélecteur donné au lieu du tableau lors de la construction avec webpack + es6, de manière inattendue. Google Maps: relatif au positionnement fixe AJAX-PHP Reste sur la même page si la validation échoue bouton radio pour les handicapés JQuery: publiez un jeton FormData ET csrf ensemble Maintenir deux s synchronisés Onglets de l’interface utilisateur jQuery avec des tabs activés par liste déroulante Problème avec jqGrid et l’événement click jquery Comment passer un nom d’action en utilisant un lien hypertexte dans Struts 2? jquery bind ne fonctionne pas dans Firefox jQuery valider pour multisélection ne fonctionne que sur double clic Faites défiler jusqu’à une div spécifique lors du chargement de la page

Utilisez Javascript / JQuery pour créer dynamicment plusieurs boutons HTML avec différents gestionnaires d’événements de clic

J’essaie d’utiliser Javascript / JQuery pour créer dynamicment plusieurs boutons HTML, chacun faisant quelque chose de différent quand on clique dessus.

Ma première tentative a ressemblé à ceci: 

function myFunc( target_div, num_buttons ) { var buttons=""; for ( var i=0; i<num_buttons; i++ ) { buttons += ''; } target_div.html( buttons ); var doButtonPress = function( i ) { alert( i ); // I actually do something more complicated here, but it's not important now } for ( var i=0; i<num_buttons; i++ ) { $('#button_'+i).click( function() { doButtonPress(i); } ); } }

Malheureusement, cela ne fonctionne pas car (je pense) lorsque l’événement click se produit, doButtonPress se voit toujours transmettre la valeur actuelle de i dans la scope de myFunc, et non pas – comme je le souhaitais – la valeur que j’avais lorsque l’événement click a été défini. Ainsi, la valeur transmise à doButtonPress est toujours égale à num_buttons, quel que soit le bouton enfoncé. Alors j’ai alors essayé ceci à la place: 

 $('#button_'+i).click( new Function( "doButtonPress("+i+");" ) );

Malheureusement, cela ne fonctionne pas non plus – je reçois le message “ReferenceError: impossible de trouver la variable: returnResult”. Je suppose que c’est parce que la valeur arg du constructeur Function n’est pas analysée jusqu’à ce que l’événement click se produise, et à ce moment-là, je suis déjà en dehors de la scope de myFunc alors doButtonPress n’est-il pas défini? Est-ce que je comprends bien jusqu’à présent?

Alors qu’est-ce que je fais? 🙂

Votre code n’a pas fonctionné à cause de la scope de la variable i qui serait num_button toujours dans le gestionnaire. Vous pouvez le réparer en l’enveloppant dans une closure mais que diriez-vous de le simplifier en ajoutant une classe et en utilisant l’identifiant du bouton. 

 function myFunc( target_div, num_buttons ) { var buttons=""; for ( var i=0; i'; } target_div.html( buttons ); var doButtonPress = function( i ) { alert( i ); // I actually do something more complicated here, but it's not important now } //yes, mybuttons exist $('.mybuttons').click(function () { doButtonPress(this.id.replace('button_', '')); //this.id.replace('button_', '') <- returns i value }); }

Ma suggestion serait d’atsortingbuer à chaque bouton un atsortingbut de data qui puisse ensuite être lu lorsque l’on clique sur le bouton. Cela évitera alors le recours à des atsortingbuts d’ id incrémental inutiles (et laids). Quelque chose comme ça: 

 function myFunc($target_div, num_buttons) { var buttons = []; for (var i = 0; i < num_buttons; i++) { buttons.push($('')); } $target_div.append(buttons); var doButtonPress = function() { alert($(this).data('id')); } $(".button").click(doButtonPress); }

Exemple de violon