JQuery Добавить HTML и событие - PullRequest
Новая
       24

JQuery Добавить HTML и событие

0 голосов
/ 08 апреля 2009

В настоящее время у меня есть следующее в 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(" ");
}

При необходимости выводится список чисел, но предупреждение при нажатии на сгенерированный элемент возвращает значение totalPages, а не значение i во время цикла. Как получить событие click, чтобы предупредить значение i вместо этого?

Спасибо

Ответы [ 4 ]

3 голосов
/ 08 апреля 2009

Попробуйте это 

for (i = 0; i < totalPages; i++) {
   var newDiv = $("<a href=\"#\">").append(i+1).click(function() 
   { 
      alert(this.text);
   });
   $('#pageLinks').append(newDiv).append(" ");
}
0 голосов
/ 09 апреля 2009

Если, скажем, у вас не было текста числа как части ссылки, я хотел бы закодировать такие значения в идентификатор, который бы дал вам следующее: 

<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>
0 голосов
/ 08 апреля 2009

Это проблема, связанная с областью действия. Вам необходимо сформировать замыкание вокруг операторов в цикле for, используя то, что я называю защитой области. Примерно так: 

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(" ");
})();
0 голосов
/ 08 апреля 2009

Этот код должен решить вашу проблему: 

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