2

我在使用 jquery 的生死方法时遇到了一些麻烦。

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

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

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

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

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

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

上面的小提琴应该可以工作，但是在取消绑定事件处理程序后，它不会再次绑定？我尝试了一些命名空间等的组合，但无法将它们组合在一起。

4

3 回答 3

2

更新让它工作

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

更新了小提琴。

我相信问题是这样的。

  1. 使用 live 附加处理程序等待 5 秒
  2. 使用 live 附加一个返回 false 以停止事件的处理程序。
  3. 单击锚标记，这将删除等待 5 秒的处理程序。
  4. 此时对锚标记的点击将通过 return false 语句停止。
  5. 现在return false 语句是第一个。一旦我们重新绑定了等待 5 秒的处理程序，它就排在第二位要运行，但被 return false 处理程序拒绝。
  6. 修复了此问题以丢弃两个处理程序并以正确的顺序重新绑定它们。
于 2011-03-03T14:43:23.747 回答
1

如果您不介意这种方法（使用标记类），那么这可能就是您正在寻找的。没有杂乱的事件绑定和解除绑定 - 在试图找出一种方法来回答你的问题时，我发现跟踪页面上绑定/未绑定的所有内容非常麻烦，并且一旦我有多个加载程序，我就达到了一个阶段出现一次单击。

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

});
于 2011-03-03T14:46:53.407 回答
0

实际上，实现这一点的最简单方法是删除锚链接上的 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;    
    })
})
于 2011-03-03T14:48:12.197 回答