在循环中分配事件处理程序 - 奇怪的行为

Question

我正在使用jQuery将事件处理程序分配给div中的一大堆元素。当我在单个元素上使用jQuery“原生”on或click方法时，一切正常。但是，当我尝试在循环中执行此操作时，没有任何反应。

我有以下代码不起作用：

$tags = $("#some_div p");
var len = $tags.length;
for(var i = 0; i < len; i++)
{
    $tags[i].on('click', function(){ alert("hi"); });
}

这个代码确实有效：

$tags = $("#some_div p");
var len = $tags.length;
for(var i = 0; i < len; i++)
{
    $tags[i].onclick = function() { alert("hello"); };
}

我在第一种情况下也试过了onclick(function()...)，我尝试了$.forEach，但行为总是一样的。我在这里创建了一个JS小提琴：http://jsfiddle.net/fM2ar/

我对jQuery没有多少经验，但我对文档的阅读是第一种方法应该有用 - 任何帮助都会非常感激。

Answer 1

$tags[i]为您提供DOMElement，而不是jQuery对象。 onclick is a DOM property，这就是它的原因。 on() is a jQuery method，这就是为什么它不起作用。

只需将DOMElement包装在jQuery对象中即可使用on()方法;

$($tags[i]).on('click', function(){ alert("hi"); });

或者，您可以使用eq(i) method，它返回位于i的元素，包装在jQuery对象中;

$tags.eq(i).on('click', function(){ alert("hi"); });

Answer 2

绝对不需要for循环：

$("#some_div p").on('click', function() {
    alert( this.innerHTML );
});