0

我有以下代码在 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），就像绑定针对每个 p 元素完成了 3 次。

是什么导致了这种行为？

4

4 回答 4

4

You cannot use .live on a DOM element (which is created from the HTML string in this case). .live only works with selectors. See the list of drawbacks in its documentation.

I don't see a reason to use event delegation at all here, just bind the event handler directly to the element using .on or the shorthand .click (did some extra refactoring ;)):

jQuery.each(res, function () {
    $("<p/>", {
         id: this.UrlTitle,
         text: this.Name
     }).on('click', function () { 
         alert('hello from binded function call') 
    }).appendTo(dataList);
});
于 2012-08-22T13:32:35.080 回答
0

你正在.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);
});

然而...

有一个更好的语法来创建具有各种属性和事件监听器的 jQuery 对象：

$.each(res, function () 
{
    $("<p/>", {
        id: this.UrlTitle,
        text: this.Name,
        click: function () {
            alert('hello from binded function call')
        }
    ).appendTo(dataList);
});
于 2012-08-22T13:32:21.640 回答
0

使用on()方法而不是live()方法。我认为正在发生的事情是事件被附加到父级 3 次（live()使用事件委托），因此每次单击 a 时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);
});
于 2012-08-22T13:32:23.933 回答
0

如果您使用 .live() 并且没有添加 onclick 属性，或者它不应该在该循环中。

Live 的行为类似于 CSS，即使元素是在页面上动态创建的，也会被绑定。如果您使用 bind('click', ....) 或 on('click', ....) 它不会那样工作。它需要像您在此处所做的那样在该元素上显式设置。

您正在做的实际上是将一个新的 onclick 事件绑定到每个带有 #this.UrlTitle 的元素，用于该循环的每次迭代。

这就是您收到三个警报的原因。使用 jQuery on() 或 bind() 或像使用 id 一样设置 onclick ... onclick="alert('....');"。

于 2012-08-22T13:36:13.337 回答