Javascript Jquery。单击变量并更改元素引用？

我有这个JavaScript代码。它似乎在每一个方面都起作用，只有一个例外。此脚本用于一个小型时钟应用程序。在主页上，一些PHP决定是显示“开始”按钮、“停止”按钮，还是显示文本区域，以根据数据库中的某些信息记录时间段内完成的工作

此JS代码旨在向PHP文件发送AJAX请求，PHP文件根据当前可见的输入操作DB。如果PHP脚本没有返回错误，JS应该从DOM中删除当前输入，并将与循环中的下一步相关联的输入添加到DOM中

我认为这里的问题是，在

currentSubmit

的初始元素引用发生更改后，jQuery的

.click（）

功能没有触发

我可能错了，但不管是什么问题，我该如何回避呢

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

if（$（'input[name=“timeclock\u input”]）。长度==0）{
var currentSubmit=$（'input[name=“submit_record”]”）；
}否则{
var currentSubmit=$（'input[name=“timeclock_input”]）；
}
变量inputValueArray=[
“启动时钟”，
“停止计时钟”，
“添加记录”
];
currentSubmit.click（函数（）{
如果（currentSubmit.val（）==inputValueArray[0]）{
$.post（“php/record.php”，{action:“start”}）
.完成（功能（数据）{
如果（数据=“成功”）{
$（'input[name=“timeclock\u input”]'）。替换为（“”）；
currentSubmit=$（'input[name=“timeclock_input”]）；
}否则{
警报（数据）；
}
});
}else if（currentSubmit.val（）==inputValueArray[1]）{
$.post（“php/record.php”，{action:“stop”}）
.完成（功能（数据）{
如果（数据=“成功”）{
$（'input[name=“timeclock_input”]'）。替换为（'
'）；
currentSubmit=$（'input[name=“submit_record”]”）；
}否则{
警报（数据）；
}
});
}else if（currentSubmit.val（）==inputValueArray[2]）{
$.post（“php/record.php”，{action:“record”}）
.完成（功能（数据）{
如果（数据=“成功”）{
$（“#记录容器”）。替换为（“”）；
currentSubmit=$（'input[name=“timeclock_input”]）；
}否则{
警报（数据）；
}
});
}
});

我找到了问题的答案。解决方案是像这样使用事件委派

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

---

您有3个不同的按钮，可以执行三种不同的操作。我将为每个按钮分配一个单独的

$。单击（function（）{…}）

。页面加载时，默认（第一个）按钮应可见（

$.show（）

），另外两个按钮应隐藏（

$.hide（）

）。然后在每个

if（data==“success”）{…}

部分中，单击当前按钮和下一个按钮。

实际上，我是故意这样做的。真的，所有这些按钮实际上做着完全相同的事情。这相当于使用不同的参数执行函数。添加三个不同的

.click（）

函数似乎违反了DRY原则。此外，我将它们从DOM中删除，而不是简单地隐藏元素，以阻止客户端的一些JS程序员违反预期发生的事件顺序。