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