jQuery .live() 问题答案

【问题标题】：jQuery .live() issuejQuery .live() 问题
【发布时间】：2012-02-25 04:50:35
【问题描述】：

我有一个有序列表，每个项目都有一个带有“additem”类的链接，可以将另一个项目添加到列表中。为了使新添加的项目中的添加项目链接起作用，我使用了.live()，如下所示：

function pageFunctions() {

    $('a.additem').click(function() {

        $('<li>'+trackli+'</li>').insertAfter($(this).parent());

    });
});
// there are other functions that warrant 'pageFunctions' being a separate function

$(function() {

    pageFunctions();

    $('a.additem').live('click', pageFunctions);

});

但是，当您第一次单击添加项目链接时，它会正常工作。但在那之后，不是一次添加一个项目，而是将它加倍。第三次再次加倍。任何想法如何解决这个问题？

【问题讨论】：

标签： jquery

【解决方案1】：

问题在于，每次调用 pageFunctions 时，您都会通过 .click() 调用注册额外的新事件处理程序。试试这个：

function pageFunctions() {

$('<li>'+trackli+'</li>').insertAfter($(this).parent());

});

$(function() {

    pageFunctions();

    $('a.additem').live('click', pageFunctions);

});

【讨论】：

【解决方案2】：

每次运行 pageFunctions 时都会将点击事件绑定到 'a.additem'。从 pageFunctions 函数中删除绑定，您的问题应该会消失。

【讨论】：

【解决方案3】：

这里发生的情况是，每当您单击“a.additem”时，每次都会将新的单击事件绑定到锚点，并创建列表元素。这意味着每次单击锚点时，代码将运行两倍于上次执行的次数。

以下应该有效：

function pageFunctions() {
    $('<li>'+trackli+'</li>').insertAfter($(this).parent());
});

$(function() {    
    $('a.additem').live('click', pageFunctions);
});

【讨论】：