JQuery Ajouter HTML et l'événement

StackOverflow https://stackoverflow.com/questions/730586

  •  06-09-2019
  •  | 
  •  

Question

J'ai actuellement ce qui suit dans JQuery 1.3.2 

for (i = 0; i < totalPages; i++) {
   var newDiv = $("<a href=\"#\">").append(i+1).click(function() 
   { 
      alert(i+1);
   });
   $('#pageLinks').append(newDiv).append(" ");
}

Ceci produit une liste de numéros selon les besoins, mais l'alerte lorsque vous cliquez sur l'élément généré retourne la valeur TotalPages, pas la valeur de i au cours de la boucle. Comment puis-je obtenir l'événement click pour alerter la valeur de i à la place?

Merci

Était-ce utile?

La solution

Essayer cette 

for (i = 0; i < totalPages; i++) {
   var newDiv = $("<a href=\"#\">").append(i+1).click(function() 
   { 
      alert(this.text);
   });
   $('#pageLinks').append(newDiv).append(" ");
}

Autres conseils

Ce code doit trier votre problème sur: 

for (i = 0; i < totalPages; i++) {
    var newDiv = $("<a href=\"#\">")
        .append(i+1)
        .click(
            function() { 
                alert($(this).html());
            }
         );
    $('#pageLinks').append(newDiv).append(" ");
}

Si, par exemple, vous n'avez pas le texte du numéro dans le cadre du lien, j'aime encoder des valeurs comme celui-ci dans l'ID, qui vous donnerait ceci: 

<body>
<div id="pageLinks"><!-- --></div>

<script>
var totalPages = 10, newDiv;
for (i = 0; i < totalPages; i++) {
  var link = "<a href=\"#\" id=\"link-"+(i+1)+"\">"+(i+1)+"</a>";
  newDiv = $(link).click(function() {
    alert($(this).attr('id').split('-')[1]);
  });
  $('#pageLinks').append(newDiv).append(' ');
}
</script>
</body>

Ce problème est lié à la portée. Vous devez former une fermeture autour des déclarations dans la boucle à l'aide, ce que j'appelle un garde de portée. Quelque chose comme ceci: 

var totalPages = 10;
for (i = 0; i < totalPages; i++) {
    (function() {
        var no = i + 1;
        var newDiv = $("<a href=\"#\">").append(i+1).click(function() {
        alert(no);
    });
    $('#pageLinks').append(newDiv).append(" ");
})();
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top