jQuery .each() 添加事件处理程序答案

【问题标题】：jQuery .each() to add event handlerjQuery .each() 添加事件处理程序
【发布时间】：2012-01-18 02:12:23
【问题描述】：

我在使用 jQuery 中的 .each() 函数时遇到问题，当我成功 getAjax 并将其存储在数据变量中时，我正在调用这些行：

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

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

有人知道为什么吗？

谢谢！

【问题讨论】：

标签： jquery json iteration each

【解决方案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);

希望你看看它是如何工作的......

【讨论】：

感谢您的帮助 AndreasAL 我今天早上弄清楚了为什么它出现了 5 次但仍然不知道如何解决它，现在它工作正常！

【解决方案2】：

不妨试试这个

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

});

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

【讨论】：

虽然这提供了所需的功能，但@AndreasAL 的解决方案更好，因为它不会让 jQuery 重新查找附加的元素。