$.live()和$.die()绑定和解除绑定

Question

我在使用jquery的live和die方法时遇到了一些麻烦。

http://jsfiddle.net/fC5Nr/4/

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

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

我可以很好地完成上面的所有工作。

但是，因为上面的处理程序被附加到(a)标记，所以我需要返回false (以防止链接被跟踪)。为此，我需要绑定一个不同的函数来处理点击并返回false。

我需要知道如何解除我的复杂函数的绑定--同时保持我的简单函数(return false)的绑定。

上面的小提琴应该可以工作，但在解除绑定事件处理程序后，它不会再次绑定吗？我已经尝试了几种命名空间的组合，但是都不能把它们组合起来。

Answer 1

更新使其正常工作

   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);

已更新fiddle。

我相信问题是这样的。

使用live来附加等待5秒的处理程序，使用live来附加返回false以停止事件的处理程序。此时将通过return false statement.

• NOW

2. false语句停止
3. 单击锚点标记的等待5秒锚点标记。一旦我们重新绑定了等待5秒的处理程序，它就会在第二个位置运行，但是会被返回false handler.
4. Fixed拒绝，这会丢弃这两个处理程序并以正确的顺序重新绑定它们。

Answer 2

如果您不介意这种方法(使用标记类)，那么这可能就是您正在寻找的。没有乱七八糟的事件绑定和解绑-当我试图找出一种方法来回答你的问题时，我发现跟踪页面上绑定/解绑的所有东西是一件相当麻烦的事情，我曾经达到过这样一个阶段，即一次点击就会出现多个加载器。

$(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)});

});

Answer 3

实际上，实现这一点的最简单方法是删除锚链上的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;    
    })
})