JQuery Adicionar HTML e eventos
-
06-09-2019 - |
Pergunta
Actualmente tenho o seguinte em 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(" ");
}
Isso gera uma lista de números, conforme necessário, mas o sempre alerta ao clicar no elemento gerado está retornando o valor TotalPages, e não o valor de i durante o loop. Como faço para que o evento clique para alertar o valor de i em vez disso?
Graças
Solução
Tente este
for (i = 0; i < totalPages; i++) {
var newDiv = $("<a href=\"#\">").append(i+1).click(function()
{
alert(this.text);
});
$('#pageLinks').append(newDiv).append(" ");
}
Outras dicas
Este código deve resolver o seu problema out:
for (i = 0; i < totalPages; i++) {
var newDiv = $("<a href=\"#\">")
.append(i+1)
.click(
function() {
alert($(this).html());
}
);
$('#pageLinks').append(newDiv).append(" ");
}
Se, por exemplo, você não tem o texto do número como parte do link, eu gosto de valores codificar como este para o id, que iria dar-lhe o seguinte:
<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 é um problema escopo relacionado. Você precisa formar um fecho em torno das declarações no loop for usando, o que eu chamo um guarda escopo. Algo parecido com isto:
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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow