Jquery $.live（）和$.die（）绑定和解除绑定

我在jquery的生存和死亡方法方面遇到了一些问题

我需要在单击链接时附加一个事件处理程序，并且我希望在函数运行时解除处理程序的绑定，以防止函数在完成之前反复运行（函数执行ajax请求，然后处理响应）

我可以把上面的一切都做得很好

但是，由于上面的处理程序附加到（a）标记，我需要返回false（以防止链接被跟踪）。为此，我需要绑定不同的函数来处理单击并返回false

我需要知道如何解除复杂函数的绑定，同时始终保持简单（返回false）绑定

---

上面的fiddle应该可以工作，但在解除事件处理程序的绑定后，它不会再次绑定？我尝试了一些名称空间等组合，但无法将其组合在一起。

更新让它工作了

   function denyRest() {
        $("body").append("<h1>return false</h1>");
        return false;
    }
    function functionThatWaitsFiveSeconds() {
        $('a').die('click.thing', functionThatWaitsFiveSeconds);
        var loader = $('<div class="loader">doing some stuff</div>');
        $('#content').append(loader);
        loader.animate({
            'width': '500'
        }, 5000, function() {
            loader.remove();
            $('a').die('click.otherthing', denyRest).live('click.thing', functionThatWaitsFiveSeconds).live('click.otherthing', denyRest);
        });
    }

    $('a').live('click.thing', functionThatWaitsFiveSeconds);
    $('a').live('click.otherthing', denyRest);

函数denyRest（）{
$（“body”）.append（“return false”）；
返回false；
}
函数functionthattwaitsfiveseconds（）{
$（'a'）.die（'click.thing'，函数waitsfiveseconds）；
var loader=$（“做一些事情”）；
$（“#内容”）.append（加载器）；
动画加载器({
“宽度”：“500”
}，5000，函数（）{
loader.remove（）；
$（'a'）.die（'click.otherthing'，denyRest.）.live（'click.thing'，functionthattwaitsfiveseconds.）.live（'click.otherthing'，denyRest）；
});
}
$（'a'）.live（'click.thing'，functionthattwaitsfiveseconds）；
$（'a'）.live（'click.otherthing'，denyRest）；

更新

我相信问题就在于此

使用live连接处理程序以等待5秒

使用live附加返回false以停止事件的处理程序

单击锚定标记，这将删除等待5秒处理程序

此时对锚定标记的单击将通过returnfalse语句停止

现在return false语句是第一个语句。一旦我们重新绑定wait 5s处理程序，它将位于第二位，但被return false处理程序拒绝

修复了将两个处理程序都丢弃并按正确顺序重新绑定的问题

---

如果您不介意这种方法（使用marker类）那么这可能就是你想要的。没有混乱的事件绑定和解除绑定-当我试图找到一种方法来回答你的问题时，我发现跟踪页面上绑定/解除绑定的所有内容是一件非常麻烦的事情，我曾经达到一个阶段，在这个阶段中，我一次单击就会出现多个加载程序

$(document).ready(function(){
    function functionThatWaitsFiveSeconds(el, e){
        //stop default link click events
        e.preventDefault();
        e.stopPropagation();

        if($(el).hasClass('loadingMarkerClass')) {
           return false; //we're currently processing this element already
       }
        $(el).addClass('loadingMarkerClass'); //add a dummy, marker class to indicate we're showing a loader for this element

        var loader = $('<div class="loader">Loading: ' + $(el).html() + '</div>');
        $('#content').append(loader);
        loader.animate({'width': '500'}, 5000, function(){
            loader.remove();
            $(el).removeClass('loadingMarkerClass');
        });
    }

    //bind above function to clicking a
    $('a').live('click', function(e){functionThatWaitsFiveSeconds(this, e)});

});

$（文档）.ready（函数（）{
函数等待五秒（el，e）{
//停止默认链接单击事件
e、 预防默认值（）；
e、 停止传播（）；
if（$（el）.hasClass（'loadingMarkerClass'））{
return false；//我们当前已在处理此元素
}
$（el）.addClass（'loadingMarkerClass'）；//添加一个伪标记类，以指示我们正在显示此元素的加载器
var loader=$（'Loading:'+$（el.html（）+''）；
$（“#内容”）.append（加载器）；
动画（{'width'：'500'}，5000，function（）{
loader.remove（）；
$（el）.removeClass（'loadingMarkerClass'）；
});
}
//将上述函数绑定到单击
$（'a'）.live（'click'，函数（e）{functionthattwaitsfiveseconds（this，e）}）；
});

实际上，实现这一点的最简单方法是删除锚链接上的href标记

所以你的代码变成了

$(document).ready(function(){

    function functionThatWaitsFiveSeconds(){
       // $('a').die('click', functionThatWaitsFiveSeconds);
        var loader = $('<div class="loader">doing some stuff</div>');
         $(this).attr("href","#");
            $('#content').append(loader)
            loader.animate({'width': '500'}, 5000, function(){
                loader.remove();
                //now rebind click handler
         //       $('a').live('click', functionThatWaitsFiveSeconds)
            })
    }



    //bind above function to clicking a
    $('a').live('click', functionThatWaitsFiveSeconds)

    //need to return false at all times to prevent folowing link
    $('a').live('click',function(){
        return false;    
    })
})

$（文档）.ready（函数（）{
函数functionthattwaitsfiveseconds（）{
//$（'a'）.die（'click'，函数等待五秒钟）；
var loader=$（“做一些事情”）；
$（this.attr（“href”，“#”）；
$（“#内容”）.append（加载器）
动画（{'width'：'500'}，5000，function（）{
loader.remove（）；
//现在重新绑定单击处理程序
//$（'a'）.live（'click'，函数waitsfiveseconds）
})
}
//将上述函数绑定到单击
$（'a'）.live（'click'，函数waitsfiveseconds）
//需要始终返回false，以防止出现以下链接
$（'a'）.live（'click'，function（））{
返回false；
})
})

unbind and rebind？一个简单的标志有什么问题吗？啊，Maaaaaannnn。我现在觉得自己像个傻瓜。我试图通过在“单击名称空间”之间留出一个空格而不是点“单击.名称空间”来命名我的事件。谢谢你发布这篇文章（砰的一声从桌子上落下）作为对您旁白的回复：a标记是在没有javascript的情况下保留功能所必需的。很抱歉，我很快就谈到了。您的示例不起作用-它在解除绑定事件处理程序后不会重新绑定它（与我遇到的问题相同…）好的，我相信它现在正在工作，请查看更新的小提琴并告诉我。@Mark-我相信当您有多个链接时，这会失败。单击一个链接并开始加载程序显示将解除处理程序与所有其他链接的绑定。哦？您可以使用“live”绑定，并使用“unbind”解除绑定，而不是使用die？不知道：-）谢谢。这将解除我不想解除绑定的单击事件的绑定。@calumbrodie我已经用我认为有效的东西更新了我的答案-它可以处理链接上的多次单击，允许在页面中有多个链接，也可以防止链接被跟踪。@calumbrodie我刚刚注册了JSFIDLE，感谢您的回答-您的方法确实有效，您发布的FIDLE解决了我指出的所有问题。我仍然没有弄清楚为什么我的原始代码不能工作，虽然链接是一个要求，但它不是可选的。谢谢

$(document).ready(function(){

    function functionThatWaitsFiveSeconds(){
       // $('a').die('click', functionThatWaitsFiveSeconds);
        var loader = $('<div class="loader">doing some stuff</div>');
         $(this).attr("href","#");
            $('#content').append(loader)
            loader.animate({'width': '500'}, 5000, function(){
                loader.remove();
                //now rebind click handler
         //       $('a').live('click', functionThatWaitsFiveSeconds)
            })
    }



    //bind above function to clicking a
    $('a').live('click', functionThatWaitsFiveSeconds)

    //need to return false at all times to prevent folowing link
    $('a').live('click',function(){
        return false;    
    })
})