jQuery的單擊事件

Question

我有一些jQuery的，看起來像這樣，

$('.career_select .selectitems').click(function(){ 
    var selectedCareer = $(this).attr('title'); 
    $.ajax({ 
     type: 'POST', 
     url: '/roadmap/step_two', 
     data: 'career_choice='+selectedCareer+"&ajax=true&submit_career=Next", 
     success: function(html){ 
      $('.hfeed').append(html); 
      $('#grade_choice').SelectCustomizer(); 
      } 
    }); 
}); 

我的問題是，如果用戶一直點擊那麼.hfeed狀態越來越附加給它的數據。我如何限制它只能點擊一次？

Answer 1

使用one功能：

附加的處理程序爲元素的事件。該處理器是每個元素

如果你想只被點擊的元素一次，然後重新啓用，一旦請求完成執行最多一次，你可以：

A）保持一個狀態變量。如果請求當前正在進行，則更新並在事件的頂部退出。
B）使用one，把你的代碼放入一個函數中，並在完成請求時重新綁定。

第二個方案是這樣的：

function myClickEvent() { 
    var selectedCareer = $(this).attr('title'); 
    var that = this; 

    $.ajax({ 
     type: 'POST', 
     url: '/roadmap/step_two', 
     data: 'career_choice='+selectedCareer+"&ajax=true&submit_career=Next", 
     success: function(html){ 
      $('.hfeed').append(html); 
      $('#grade_choice').SelectCustomizer(); 
     }, 
     complete: function() { 
      $(that).one('click', myClickEvent); 
     } 
    }); 
} 

$('.career_select .selectitems').one('click', myClickEvent); 

Answer 2

您可以使用全局變量一樣

var added = false; 
$('.career_select .selectitems').click(function(){ 
    if(!added) { 
     // previous code here 
     added = true; 
    } 
}); 

或使用.one("click", function() { ... })而不是以前的點擊功能最多一次執行處理程序每個元素。有關更多詳細信息，請參見http://api.jquery.com/one/。