jQuery .click更改元素引用的变量？

Question

I have this JavaScript code. It seems to be working in every way but one. This script is for a small timeclock application. On the main page, some PHP decides whether to display a "Start" button, a "Stop" button, or a textarea to note the work done during the time period recorded based upon some information in the database.

This JS code is intended to send an AJAX request to a PHP file which manipulates the DB based on which of the inputs is currently visible. If the PHP script doesn't return an error, the JS should remove the current input from the DOM and add the input associated with the next step in the cycle to the DOM.

I believe the problem here is that the .click() function of jQuery is not triggered after the initial element reference of currentSubmit has changed.

I could be wrong, but whatever the issue is, how do I get around it?

if($('input[name="timeclock_input"]').length == 0) {
  var currentSubmit = $('input[name="submit_record"]');
} else {
  var currentSubmit = $('input[name="timeclock_input"]');
}
var inputValueArray = [
  "Start Timeclock",
  "Stop Timeclock",
  "Add Record"
];
currentSubmit.click(function() {
  if (currentSubmit.val() == inputValueArray[0]) {
    $.post( "php/record.php", { action: "start" })
      .done(function( data ) {
    if (data == "success") {
      $('input[name="timeclock_input"]').replaceWith('<input type="button" name="timeclock_input" value="Stop Timeclock" />');
      currentSubmit = $('input[name="timeclock_input"]');
    } else {
      alert(data);
    }
      });
  } else if (currentSubmit.val() == inputValueArray[1]) {
    $.post( "php/record.php", { action: "stop" })
      .done(function( data ) {
    if (data == "success") {
      $('input[name="timeclock_input"]').replaceWith('<div id="record-container"><textarea name="timeclock_input" placeholder="Description of Work Completed"></textarea><br /><input type="button" name="submit_record" value="Add Record" /></div>');
      currentSubmit = $('input[name="submit_record"]');
    } else {
      alert(data);
    }
      });
  } else if (currentSubmit.val() == inputValueArray[2]) {
    $.post( "php/record.php", { action: "record" })
      .done(function( data ) {
    if (data == "success") {
      $('#record-container').replaceWith('<input type="button" name="timeclock_input" value="Stop Timeclock" />');
      currentSubmit = $('input[name="timeclock_input"]');
    } else {
      alert(data);
    }
      });
  }
});

Answer 1

I found the answer to my question. The solution is to use event delegation like this...

$('#input-container').on( "click", "input", function() {
     Other Code Here...
});

Answer 2

You have 3 different buttons that do three different things. I would assign a separate $.click(function(){...}) for each button. The default(first) button should be visible ( $.show() ) and the other two hidden ( $.hide() ) on page load. Then in each if (data == "success"){...} section $.hide() the current button and $.show() the next button.