根据表单输入长度触发事件

Question

每当表单长度发生变化时，我都会尝试自动保存表单。 下面是我的代码。初始表单长度被正确记录，变量$("form input").length在我玩表单时会发生变化，但if语句中的块没有被触发。

有人知道这是为什么吗？

var formLength = $("form input").length;
console.log("the current formLength is" + formLength);

$(document).ready(function() {
  if ($("form input").length > formLength) {
    setTimeout(autoSaveForm, 10000);

    formLength = $("form input").length;

    console.log("the updated formLength is" + formLength);
  }
});

更新：Florian 完美地解决了这个问题。我有一个新问题的更新。我拥有的表单是在 Rails 中使用 Cocoon gem 的嵌套表单。每当在嵌套中添加一个孩子时，就会加载一个 datepicker.js。

但是，日期选择器仅在设置的时间间隔之后加载。

以下是我的新代码。有什么想法吗？

var formLength = $("表单输入").length; console.log("当前的formLength是：" + formLength);

$(document).ready(function() {
  $.each($('[data-behaviour~=datepicker]'), function(index, element) {
    if (element.value) {
      var dsplit = element.value.split("-");
      var d =new Date(dsplit[0],dsplit[1]-1,dsplit[2]);
      element.value = d;
    }
    new Pikaday({ field: element });
  });

  setInterval(function() {
    if ($("form input").length > formLength) {
      console.log("the updated formLength is : " + formLength);
      formLength = $("form input").length;

      var uuid = $("#uuid").html();
      $.ajax({
        type: "POST",
        url: "trailers/" + uuid + "/save-draft",
        data: $("form").serialize(),
        success: function() {
        }
      });
    } else {
      console.log("Nop. (" + $("form input").length + ")");
    }
  }, 30000);
});

Answer 1

不太确定您要干燥以达到什么目的，但这是一个可行的示例：

var formLength = $("form input").val().length;
console.log("the current formLength is : " + formLength);

$(document).ready(function() {
    setInterval(function(){ 
      if ($("form input").val().length > formLength) {
        formLength = $("form input").length;
        console.log("the updated formLength is" + formLength);
        //setTimeout(autoSaveForm, 10000); //auto save!
      } else {
        console.log("Nop. (" + $("form input").val().length + ")");   
      }    
    }, 3000);
});

document.ready 函数中的所有内容都只会在页面加载后执行，因此如果您想进行定期检查，您需要一个 setInterval （定期执行）。

您还可以在文本输入中添加偶数，例如：

$("form input").bind("change paste keyup", function() {
   //but your code inside
});