$ .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。

我需要知道如何解除我的复杂功能 - 同时保持我的简单（返回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。

我相信问题是这样的。

1. 使用Live附加的处理程序，以等待5秒钟
2. 使用活到附上返回false阻止事件的处理程序。
3. 单击锚标签，它会删除等待5秒处理程序。
4. 此时对锚点标记的点击将通过返回false语句停止。
5. NOW返回虚假陈述是第一位的。一旦我们重新绑定等待5秒处理程序，它将排在第二位，但会被返回错误处理程序拒绝。
6. 修复此错误，以垃圾处理程序和重新绑定他们在正确的顺序。

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