的jQuery如何更換A HREF的類名，然後點擊的Sametime運行功能

Question

我有一個HREF鏈接如下

<a href="#" class="add_encounter">Add</a> 

上$(document).ready我運行這個功能是如下

$('.add_encounter').click(function(event) { 
    add_encounter(encounters); 
    event.preventDefault(); 
}); 

在add_encounter函數我改變了ahref類名從add_encounter遇到encounterSubmitter，並希望點擊相同的運行其他功能，但當我點擊 鏈接它運行該功能，並將類名更改爲encounterSubmitter並改回同一類即add_enounter

function add_encounter(encounters) { 
    if ($('.add_encounter').text() == "Add"){   
     $('.add_encounter').removeClass().addClass("encounterSubmitter") 
    } 
    $('.encounterSubmitter').click(function(event) {save(); event.preventDefault();}); 
} 

保存功能是如下

function save() { 
    var encounter = $('#name').val(); 
    var key = $('#encounterKey').val(); 
    if (key == '') { 
     key = null 
    } 
    if (encounter == ''){ 
cancel_encounter() 
    } 
} 

cancel_encounter是如下

function cancel_encounter() {  
     $('.encounterSubmitter').removeClass().addClass("add_encounter") 
     $('.add_encounter').text("Add")   
} 

如此這般保存功能檢查，如果條件並進入cancel_encounter功能 並將類名更改爲add_encounter

我知道這個問題有點混亂，我希望能夠理解它，或者遇到過這種問題都能給我解決。

Answer 1

HTML

<a href="#" class="add my_encounter">Add</a> 

JS

$('.my_encounter').bind('click', function(event) { 

    if ((this).hasClass('add')){ //add_encounter 
     //encounters ??? 
     $(this).removeClass('add').addClass("submitter") 

    } 
    else if ((this).hasClass('submitter')){ // save 
     var encounter = $('#name').val(), 
      key = $('#encounterKey').val(); 

     if (key == '') { 
     key = null 
     } 
     if (encounter == ''){ 
     // cancel_encounter 
     $(this) 
      .removeClass("submitter") 
      .addClass("add") 
      .text("Add"); //?? where remove text "Add" 
     } 

    } 

    event.preventDefault(); 
}); 

Answer 2

無法檢驗這個權利，但也許這將工作：

$('.add_encounter').click(function(event) { 
     add_encounter(encounters); 
     event.preventDefault(); 
    }); 

    function add_encounter(encounters) { 
     if ($('.add_encounter').text() == "Add"){   
      $('.add_encounter').removeClass().addClass("encounterSubmitter") 
     } 
    } 

    $('.encounterSubmitter').live('click',function(event){ 
     save(); 
     event.preventDefault(); 
    }); 

    function save() { 
     var encounter = $('#name').val(); 
     var key = $('#encounterKey').val(); 
     if (key == '') { 
      key = null 
     } 
     if (encounter == ''){ 
      cancel_encounter() 
     } 
    } 

    function cancel_encounter() {  
     $('.encounterSubmitter').removeClass().addClass("add_encounter") 
     $('.add_encounter').text("Add")   
    } 

問題是由您add_encounter被調用函數保存功能。因此他會檢查你的密鑰，並依次調用cancel_encounter函數來重置鏈接。

即使您的要綁定的元素在加載javascript後加載，實時調用仍然可以工作。