Question

我在jQuery中遇到.each（）函数的问题，当我成功获取Ajax并将其存储在数据变量中时，我正在调用这些行：

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

问题是，一旦我点击我的一个元素（一切看起来都很好并且文本正确），我会为每个元素弹出5次警报。从JSON中的0到5个对象迭代。

有人知道为什么吗？

谢谢！

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

Mabey试试这个

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

});

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

jQuery .each（）添加事件处理程序

2 个答案: