Question

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

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

我需要附加一个事件处理程序来单击一个链接 - 我想在函数运行时取消绑定处理程序以防止函数在完成之前反复运行（函数正在执行ajax请求然后处理响应

我可以做上述所有事情。

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

我需要知道如何取消绑定我复杂的功能 - 同时始终保持简单（返回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的处理程序以停止事件。
点击锚标记，删除等待5秒处理程序。
此时点击锚标记将通过return false语句停止。
NOW 返回false语句是第一个。一旦我们重新绑定了等待5秒的处理程序，它就会在第二位运行，但会被return false handler拒绝。
修正了这个问题，以便废弃两个处理程序并按正确顺序重新绑定它们。

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

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

3 个答案: