Question

I have a href link is as below

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

on $(document).ready i run this function is as below

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

on add_encounter function i changed class name of ahref from add_encounter to encounter encounterSubmitter and wants to click that same to run other function but when i click the
link it runs the function and change the classname to encounterSubmitter and change back to same class i.e. add_enounter

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

save function is as below

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

cancel_encounter is as below

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

So it goes to save function checks the if condition and goes to cancel_encounter function
and changes the classname back to add_encounter

I know this question is little confusing, i hope however understand it or ever came across this kind of problem can able to give me the solution.

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