Añadir jQuery HTML y eventos

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

  •  06-09-2019
  •  | 
  •  

Pregunta

Actualmente tengo el siguiente en 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(" ");
}

Esto da salida a una lista de números como se requiere, pero la alerta al hacer clic en el elemento generada se devuelve el valor totalPages, no el valor de i durante el bucle. ¿Cómo consigo el evento click para alertar al valor de i en su lugar?

Gracias

¿Fue útil?

Solución

Probar 

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

Otros consejos

Este código debe resolver su problema hacia fuera: 

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

Si, por ejemplo, usted no tiene el texto de la serie como parte del enlace, me gustaría codificar valores como esto en el ello, lo que le daría la siguiente: 

<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>

Este es un problema relacionado con el ámbito de aplicación. Es necesario para formar un cierre alrededor de las declaraciones contenidas en el bucle utilizando, lo que yo llamo un guardia de alcance. Algo como esto: 

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(" ");
})();
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top