jQuery .each () для добавления обработчика событий

Question

У меня проблема с функцией .each () в jQuery, я вызываю эти строки, когда успешно получаю getAjax и сохраняю его в переменной данных:

$.each(data, function() {
$('#modulesList').append("<p><a href='#'>" + this.code + "</a></p>")
  .click(function(){
    alert($(this));
   });
});

Проблема в том,Как только я нажимаю на один из моих элементов a (которые все выглядят хорошо и имеют правильный текст), я получаю предупреждение, появляющееся 5 раз для каждого из них.Итерация от 0 до 5 объектов в JSON.

Кто-нибудь знает почему?

Спасибо!

Answer 1

Используйте метод appendTo

$("<p><a href='#'>" + this.code + "</a></p>").appendTo('#modulesList')
  .click(function(){
    alert($(this));
   })

jQuery ~ всегда возвращает основной элемент: теперь ваш селектор является элементом dom, и он создается и возвращается как объект jQuery.

И чтобы ответить на ваш вопрос, почему вы получаете 5 оповещений. Перед тем, как связать событие click с #modulesList по одному для каждого объекта в массиве данных. (Вот почему 5 предупреждений)

Вы также можете сохранить <p><a>... в переменной, например:

var pAndATag = $("<p><a href='#'>" + this.code + "</a></p>");
$(modulesList).append(pAndATag);

надеюсь, вы видите, как это работает ...

Answer 2

Мейби, попробуй вместо этого

$.each(data, function() {
$('#modulesList').append("<p><a href='#'>" + this.code + "</a></p>");

});

$('#modulesList p').click(function(){
    alert($(this));
   });