Question

我有这个JavaScript代码。它似乎在各方面都在发挥作用。此脚本适用于小型时钟应用程序。在主页面上，一些PHP决定是否显示＆＃34;开始＆＃34;按钮，＆＃34;停止＆＃34;按钮或文本区域，根据数据库中的某些信息记录在记录的时间段内完成的工作。

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

我认为这里的问题是在.click()的初始元素引用发生变化后，jQuery的currentSubmit函数没有被触发。

我可能是错的，但无论问题是什么，我该如何解决它？

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

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

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

Answer 2

你有3个不同的按钮可以做三种不同的事情。我会为每个按钮分配一个单独的$.click(function(){...})。默认（第一个）按钮应该在页面加载时可见（$.show()），另外两个隐藏（$.hide()）。然后在每个if (data == "success"){...}部分$.hide()当前按钮和$.show()下一个按钮。

Jquery .click变量与变量元素引用？

2 个答案: