Question

我有以下代码在Ajax调用的回调上执行：

jQuery.each(res, function () 
{
 var element = $("<p id=\"" + this.UrlTitle +"\">" + this.Name + "</p>").live('click',function () { alert('hello from binded function call') });
  dataList.append(element);
});

“res”只是一个形式良好的JSON对象，我可以看到我的html中的p元素也被创建了。

我的问题是，当我点击一个段落时，我会得到3个警报执行（“res”元素的长度为3），并且它的绑定比foreach p元素完成了三次。

导致此行为的原因是什么？

Answer 1

您不能在DOM元素（在本例中使用HTML字符串创建）上使用.live。 .live仅适用于选择器。请参阅其documentation中的缺点列表。

我没有看到在这里使用事件委托的理由，只是使用.on或简写.click将事件处理程序直接绑定到元素（做了一些额外的重构;））：

jQuery.each(res, function () {
    $("<p/>", {
         id: this.UrlTitle,
         text: this.Name
     }).on('click', function () { 
         alert('hello from binded function call') 
    }).appendTo(dataList);
});

Answer 2

您以相当奇怪的方式使用.live()。 .live()不能（正确地）用于任何旧的jQuery对象。使用.click()或.on()：

$.each(res, function () 
{
 var element = $("<p id=\"" + this.UrlTitle +"\">" + this.Name + "</p>").on('click', function () { alert('hello from binded function call') });
  dataList.append(element);
});

然而...

There is a far nicer syntax用于创建具有各种属性和事件侦听器的jQuery对象：

$.each(res, function () 
{
    $("<p/>", {
        id: this.UrlTitle,
        text: this.Name,
        click: function () {
            alert('hello from binded function call')
        }
    ).appendTo(dataList);
});

Answer 3

使用on()方法代替live()方法。我认为发生的事情是事件被附加到父母3次（live()使用事件委托）所以每次点击p时它会触发三个附加的处理程序。

on()可以使用事件委派，但内部的工作方式与live()

不同

jQuery.each(res, function () 
{
 var element = $("<p id=\"" + this.UrlTitle +"\">" + this.Name + "</p>").on('click',function () { alert('hello from binded function call') });
  dataList.append(element);
});

Answer 4

如果您正在使用.live（）而不添加onclick属性，或者它不应该在该循环中。

Live就像CSS一样，即使在页面上动态创建元素也会绑定。如果你使用bind（'click'，....）或on（'click'，....），那将无法正常工作。需要像在这里一样明确地设置该元素。

你正在做的事情实际上是为每个迭代循环使用＃this.UrlTitle将一个新的onclick事件绑定到每个元素。

这就是你收到三个警报的原因。使用jQuery on（）或bind（）或设置onclick就像使用你的id ... onclick =“alert（'....'）;”。

Jquery绑定事件到循环中的元素

4 个答案:

然而...